Vue.js中v-bind:href绑定锚点返回警告的问题求助

我来帮你梳理下代码里的问题，一步步解决这个警告：

1. 修正Computed属性的拼写错误 #

你在computed里的filterArray方法里写了return this.arrray;，这里明显是拼写错误——应该是this.array（少了字母y）。这个错误会导致Vue找不到正确的数据数组，进而引发渲染相关的警告。

修正后的computed代码：

computed: {
  filterArray: function() {
    return this.array;
  }
}

2. 修复v-for的key值问题 #

你的模板里:key="branchurl"，但branchurl并没有在Vue实例中定义。Vue要求v-for的key必须是每个循环项的唯一标识，建议用当前对象的url（因为你的数组里每个对象的url是唯一的）或者索引值：

<li v-for="object in filterArray" :key="object.url">
<!-- 或者用索引 :key="index"，不过优先推荐唯一属性值 -->

3. 完善点击事件的方法定义 #

模板里的v-on:click="function(object)"是无效的，你需要在Vue实例的methods选项中定义一个具体的处理方法，比如：

首先在Vue实例里添加methods：

var vm = new Vue({
  el: "#app",
  data: {
    array: [
      { url:"#1", phone:"", city: "", zipcode: "", name: "", address: "", time1: "", time2: "" },
      // 可以添加更多对象
    ],
  },
  computed: {
    filterArray: function() {
      return this.array;
    }
  },
  methods: {
    handleObjectClick: function(object) {
      // 这里写你点击后的逻辑，比如打印对象信息
      console.log("点击了对象:", object);
    }
  }
});

然后修改模板里的点击事件：

<a v-bind:href="object.url" v-on:click="handleObjectClick(object)">点击我</a>

（另外你的a标签里没有文本内容，建议加上，否则页面上看不到可点击的元素）

4. 验证警告是否消除 #

做完以上修改后，那个“Property or method 'data' is not defined”的警告应该会消失——本质上是因为之前computed里的拼写错误导致Vue无法正确获取数据，进而触发了渲染时的属性未定义警告。

完整可运行代码示例 #

模板部分

<div id="app">
  <ul>
    <li v-for="object in filterArray" :key="object.url">
      <a :href="object.url" @click="handleObjectClick(object)">{{ object.name || '地址链接' }}</a>
    </li>
  </ul>
</div>

Vue实例部分

var vm = new Vue({
  el: "#app",
  data: {
    array: [
      { url:"#1", phone:"123456", city: "北京", zipcode: "100000", name: "测试地址1", address: "XX街道", time1: "9:00", time2: "18:00" },
      { url:"#2", phone:"789012", city: "上海", zipcode: "200000", name: "测试地址2", address: "YY街道", time1: "8:30", time2: "19:00" }
    ],
  },
  computed: {
    filterArray: function() {
      // 这里如果需要过滤逻辑可以添加，比如return this.array.filter(item => ...)
      return this.array;
    }
  },
  methods: {
    handleObjectClick: function(object) {
      console.log("点击的对象详情:", object);
      // 其他业务逻辑
    }
  }
});

这样你的代码就能正常运行，警告也会消除啦！

内容的提问来源于stack exchange，提问作者JocisPR