通过模板重置vuejs布尔值 [英] reseting vuejs boolean value via template

问题描述

出于某种原因(不要问我为什么)，我不得不通过模板在 VueJS 中重置一个变量.所以，在 vuejs 中，我有这个:

const someApp = new Vue({分隔符:['[[', ']]'],el: '#some-app',数据: {标志:0，},方法: {changeFlag(val) {if (val === 0){//愚蠢的东西this.flag=0;}否则如果 (val ===1){this.flag=1;}返回 this.flag;},...

在我的模板中，我有这个:

 
<p class="card-text">用户故事:</p><template v-for="用户故事中的项目"><ol v-if="(some_complex_logic_here_via_filters)"><li :name="post.id + '__UA'" :data-flag="changeFlag(1)">[[ item.something] ]] </li></ol></模板><p v-if="(flag === 0)">未找到用户故事.</p>

这个想法是通过执行 changeFlag(0) 和 changeFlag(1) 我可以稍后控制

标签.但是，出于某种原因，当我执行此操作时，浏览器似乎挂起.当我删除 for 循环时，一切似乎都正常 - <p> 没有用户提示的标签可以正确呈现.错误似乎是当我使用 changeFlag(1) 重置时.

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

解决方案

这确实是一个无限渲染循环，也是在 Vue 中做事的糟糕方式.不要更改模板中的反应性数据(渲染函数)！！

阅读计算属性

计算:{过滤用户故事(){返回 this.UserStories.filter( ...some_complex_logic_here_via_filters... )}}

<p class="card-text">用户故事:</p><ol><li v-for="item in filtersUserStories" :key="item.id">{{ item.something }}</li></ol>
<p v-else>未找到用户故事.</p>

这不仅是在 Vue 中执行此操作的更简洁的方法，而且更有效，因为 filteredUserStories 计算的属性值由 Vue 缓存并仅在 UserStories 更改或一些过滤器发生了变化(假设这些过滤器及其参数是反应性的)

For some reason (dont ask me why), I am having to reset a variable in VueJS via a template. So, In vuejs, I have this:

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;
    },
    ...

In my template I have this:

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

The idea is that by excecuting changeFlag(0) and changeFlag(1) I can control the <p> tag later. However, for some reason, the browser seems to hang when I execute this. When I remove the for loop, everything seems OK - the <p> tage with no user stiries renders correctly. The error seems to be when I reset using changeFlag(1).

I am quite new to VueJS and I am wondering if there is some usage error in this...

解决方案

This is indeed an infinite render loop and also bad way to do things in Vue. Do not change reactive data from your template (render function)!!

Read about 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>

This is not only much cleaner way to do this in Vue, it's also more effective because filteredUserStories computed property value is cached by Vue and recomputed only when UserStories change or some of the filters change (assuming those filters and their parameters are reactive)

这篇关于通过模板重置vuejs布尔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！