Vue.js VueJS：直接改变道具与此相比，v-if中的[prop]

我构建了一个vue组件，通过外部laravel刀片的道具获得数值，如下所示：

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

及

问题：如果我在列表的v-If条件中使用this.mynumber，则“active”标记永远不会显示。如果我直接使用==mynumber，那么它可以工作，但我不能用axios响应更改它。 我应该如何正确处理这个问题？

---

如何使用axios调用中的新值更改初始道具

不要直接变异道具。使用

this.$emit

（Docs:）更改父项中的myNumber。myNumber将在子组件中自动更新。

不要直接改变道具。使用

this.$emit

（Docs:）更改父项中的myNumber。myNumber随后将在子组件中自动更新。

首先，您不应该直接修改道具

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

其次，在模板中不使用

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>

及

---

第一个“短路”了一次与

myNumber

的比较

myNewNumber

变成了任何“真实”的东西

首先，你不应该直接修改道具

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

其次，在模板中不使用

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>

及

---

第一个“短路”了一次与

myNumber

的比较

myNewNumber

变成了任何“真实”的东西

有趣的解决方案。如果我检查itemId==（myNewNumber | | myNumber）列表中是否有两个“活动”标记，一个是初始值，另一个是新的？我只希望最近的一个是“活动的”。不！

（myNewNumber | | myNumber）

位仅在

myNewNumber

未定义时返回原始数字。阅读我上面的编辑啊，好的，听起来不错：）但是现在我在控制台中得到了“\u vm.isCurrent不是一个函数”。我尝试了“computed:{”和“isCurrent:function（itemId）”以及“isCurrent（itemId）”，但没有成功。在模板中，检查是：“v-if=”isCurrent（item.id）”“啊！对不起，它应该是一个方法，而不是计算的。上面已修复。是的！就是这样，谢谢@Lanny Bose，它工作得很好。有趣的解决方案。如果我检查itemId==（myNewNumber | | myNumber）列表中不是有两个“活动”标记吗？一个是带有初始值的标记，另一个是新标记？我只希望最近的一个标记为“活动”。不！代码>（myNewNumber | | myNumber）bit只会在

myNewNumber

未定义的情况下返回原始数字。阅读上面的编辑啊好的，听起来不错：）但是现在我在控制台中得到了“_vm.isCurrent不是函数”。我尝试了“computed:{”和“isCurrent:function（itemId）”以及“isCurrent（itemId）”但是没有运气。在模板中，检查是：“v-if=”isCurrent（item.id）”“啊！对不起，它应该是一个方法，而不是一个计算的。上面已修复。是的！就是这样，谢谢@Lanny Bose，它工作得很好。我明白了，该方法发出“update”并且$updatedvalue会被父对象和父对象更改道具值@update。那么在laravel刀片中会是这样吗：？老实说，我以前从未与laravel合作过，但这是一般的想法，是的。您不想在子对象中复制状态。它将是

@update=“$numbervalue=$event”

不过。传递到顶部的道具始终是$event（在垂直的Vue中，不知道laravel blade如何更改$syntax，抱歉！）。一旦您的家长更改了变量，孩子将反映这些更改。无需担心，这很有帮助：）我想我走对了方向。我明白了，该方法会发出“更新”并且$updatedvalue会被父对象和父对象更改道具值@update。那么在laravel刀片中会是这样吗：？老实说，我以前从未与laravel合作过，但这是一般的想法，是的。您不想在子对象中复制状态。它将是

@update=“$numbervalue=$event”

不过。传递到顶部的道具始终是$event（在垂直的Vue中，不知道laravel blade如何更改$syntax，抱歉！）。一旦您的家长更改了变量，孩子将反映这些更改无需担心，这很有帮助：）我想我走对了方向。

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

<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)