VueJS：在 v-if 中直接改变 prop 与 this.[prop]

Question

我构建了一个 vue 组件，它通过来自外部 laravel 刀片的 prop 获取一个数值，如下所示：

<my-custom-template :mynumber="{{$numbervalue}}" :list:{{$alist}}></my-custom-template>

在模板中我有一个 v-for 列表和道具：

props:{
     list:Array,
     mynumber: Number,
    [..]
}

和

<template>
    <ul>
        <li v-for="item in list">{{item}}<span v-if="item.id == mynumber">active</span></li>
    </ul>
</template>

只要项目的 ID 与值 mynumber 相同，我希望显示“活动”标签/跨度。

现在在这个模板中，我还有一个发送 axios 请求的方法，成功后它会改变 prop "mynumber" 的值，因此应该重新呈现列表：

axios.post('/api/someurl', this.obj)
            .then(res => {
                this.mynumber= res.data[something]; // returns a new number from the db.
                        })
                .catch(error => { [..]
                };

问题：如果我在列表的 v-if 条件中使用 this.mynumber，则永远不会显示“活动”标签。如果我直接使用 == mynumber 那么它可以工作，但我不能用 axios 响应来改变它。 我应该如何正确处理这个问题？ 如何使用 axios 调用中的新值更改初始道具？

Answer 1

不要直接改变 props。改用this.$emit（文档：https://vuejs.org/v2/guide/components-custom-events.html）来更改父级中的 myNumber。 myNumber 然后会在子组件中自动更新。

Answer 2

首先，你不应该直接修改 props，as mentioned in this prior Stack Overflow post。

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“propRoomSelected”

第二，as seen in the Vue documentation for conditionals，你不要在模板中使用this，this是推断出来的。

现在，要深入了解您的问题，在渲染时如何查看 道具或新值。这是我的做法。

<template>
  <ul>
      <li v-for="item in list">{{item}}<span v-if="isCurrent(item.id)">active</span></li>
  </ul>
</template>

<script>
export default {
  props: ['list', 'myNumber'],
  data() {
    return {
      myNewNumber: undefined
    }
  },

  methods: {
    isCurrent(itemId) {
      return itemId == (myNewNumber || myNumber)
    }
  }
}

</script>

编辑：

注意有区别

return itemId == (myNewNumber || myNumber)

和

return (itemId == myNewNumber) || (itemId == myNumber)

第一个“短路”与myNumber 的比较一旦myNewNumber 变得“真实”。 Read more here.