通过模板重置vue js布尔值答案

【问题标题】：reseting vuejs boolean value via template通过模板重置vue js布尔值
【发布时间】：2020-04-20 16:08:21
【问题描述】：

出于某种原因（不要问我为什么），我不得不通过模板重置 VueJS 中的变量。所以，在 vuejs 中，我有这个：

const someApp = new Vue({
delimiters: ['[[', ']]'],
el: '#some-app',
data: {
    flag: 0,
},
methods: {
    changeFlag(val) {
        if (val === 0){//dumb stuff
            this.flag=0;
        }
        else if (val ===1){
            this.flag=1;
        }
        return this.flag;
    },
    ...

在我的模板中我有这个：

        <div :data-flag="changeFlag(0)"></div>
        <p class="card-text"> User story(s):</p>
        <template v-for="item in UserStories">
          <ol v-if="(some_complex_logic_here_via_filters )">
            <li :name="post.id + '__UA'"  :data-flag="changeFlag(1)"> [[ item.something] ]] </li>
          </ol>
      </template>
        <p v-if="(flag === 0)">No user stories found.</p>

这个想法是通过执行changeFlag(0) 和changeFlag(1) 我可以稍后控制<p> 标签。但是，由于某种原因，当我执行此操作时，浏览器似乎挂起。当我删除 for 循环时，一切似乎都正常 - 没有用户搅拌的 <p> 标记正确呈现。错误似乎是当我使用changeFlag(1) 重置时。

我对 VueJS 很陌生，我想知道这是否有一些使用错误......

【问题讨论】：

为什么不直接更改flag 的值而不使用changeFlag() 方法。这似乎更容易......
@MarsNebulaSoup：没有方法我该怎么做？你能给我看一些代码吗？
someApp.flag = val
@MarsNebulaSoup：我是否在某个 html 标记中执行此操作？
另外，为什么方法 approac 不起作用？这很奇怪。

标签： vue.js vuejs2

【解决方案1】：

这确实是一个无限渲染循环，也是在 Vue 中做事的糟糕方式。 不要更改模板中的响应式数据（渲染函数）！！

了解computed properties

computed: {
  filteredUserStories() {
    return this.UserStories.filter( ...some_complex_logic_here_via_filters... )
  }
}

<div v-if="filteredUserStories.length > 0">  
  <p class="card-text"> User story(s):</p>
  <ol>
    <li v-for="item in filteredUserStories" :key="item.id">{{ item.something }}</li>
  </ol>
</div>
<p v-else>No user stories found.</p>

这不仅是在 Vue 中更简洁的方法，而且更有效，因为 filteredUserStories 计算的属性值由 Vue 缓存并仅在 UserStories 更改或某些过滤器更改时重新计算（假设这些过滤器和它们的参数是反应性的）

【讨论】：