Question

我在学习vuejs2时有一个问题

我用插槽范围＆amp;＆amp ;;做了一个例子。 v-for，但它有一个我无法理解的错误。

这是示例代码 here

app.vue

<template id="list-template">
  <div>
    <ul>
      <slot name="row" v-for="item in list" v-bind=item />
    </ul>
  </div>
</template>

<div id="app">
  <list-component :list="list">
    <li slot="row" slot-scope="item">
      <a href="#" @click.prevent="h(item)">{{item.name}}</a>
    </li>
  </list-component>
</div>

Vue.component('list-component', {
  template: '#list-template',
   props: {
      list: {
        type: Array
      }
   }
});

new Vue({
  el: '#app',
  data () {
    return {
        list: [
        {id: 1, name: 'Apple'},
        {id: 2, name: 'Banana'},
        {id: 3, name: 'Cherry'},
        {id: 4, name: 'Durian'},
        {id: 5, name: 'Eggplant'}
      ]
    }
  },
  methods: {
    h (item) {
      item.name = item.name.toUpperCase()
      console.log('Changed!')
      console.log(item)
    }
  }
});

奇怪的是，方法'h'被触发然后，控制台说“改变了！”并且数据也发生了变化，但视图没有重新渲染。

我错过了什么？我认为插槽范围的对象数据没有引用原始对象数据。

我该怎么做才能修改原始数据？

感谢您阅读此问题。

Answer 1

您正在直接尝试修改数组中项目的值。由于某些limitations vue无法检测到此类数组修改。

因此，请更新代码以使用vm.$set()为数组项创建渐变。

methods: {
    h (item) {
      let i = this.items.findIndex((it) => it.id === item.id);
      this.$set(this.list, i, {...item, name: item.name.toUpperCase()});
    console.log(item.id)
  }

这是你pdated fiddle

带有v-for的Vue插槽范围，数据已更改但未重新呈现

1 个答案: