通过模板重置vue js布尔值

Posted 2023-02-23

【中文标题】通过模板重置vue js布尔值

【英文标题】：reseting vuejs boolean value via template

【发布时间】：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 不起作用？这很奇怪。

【参考方案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 更改或某些过滤器更改时重新计算（假设这些过滤器和它们的参数是反应性的）