vuejs if/else: 检查元素是否存在 else 添加元素

Question

我有一个像这样的v-for：

            <p> User Responses(s):</p>
        <template v-for="item in UserResponses">
          <ol v-if="item.some_condition==item._is_true">
            <li :name="item.id + '__UR'"> [[ item.some_variable_to_render ] ]] </li>
          </ol>
      </template>

效果很好。但是，我想做的是在some_condition_is_true 失败时说No user responses，但是如果我添加v-else，则消息（没有用户响应）将在每个循环中打印，这当然是不希望的。如何解决这个问题？

为此，我想知道我是否可以测试元素item.id + '__UR'" is present and if not add an element with text saying没有用户响应`

但我不确定这是解决此问题的正确方法。

编辑

重申一下：在 v-for 之前使用 v-if 不是一个选项，因为被迭代的对象是一个嵌套的 JSON，然后通过一些 vuejs 过滤器进行过滤，所以是的，这不是一个选项。

Answer 1

您可以使用 CSS 来实现它：

ol + .no-responses {
  display: none;
}

下面有一个完整的示例，但如果它出现在<ol> 之后，这个想法只是隐藏消息。调整选择器以反映您的实际用例。

我已尝试使示例中的模板与原始代码完全相同，并添加了相关消息和几个按钮用于演示目的。

new Vue({
  el: '#app',
  delimiters: ['[[', ']]'],
  
  data () {
    return {
      UserResponses: []
    }
  },
  
  methods: {
    add () {
      this.UserResponses.push(
        { some_condition: 3, _is_true: 3, id: 3, some_variable_to_render: 'A' },
        { some_condition: 3, _is_true: 4, id: 4, some_variable_to_render: 'B' },
        { some_condition: 4, _is_true: 4, id: 5, some_variable_to_render: 'C' },
        { some_condition: 5, _is_true: 5, id: 6, some_variable_to_render: 'D' }
      )
    },
    
    clear () {
      this.UserResponses.splice(0)
    }
  }
})

ol + .no-responses {
  display: none;
}

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <p>User Responses(s):</p>
  <template v-for="item in UserResponses">
    <ol v-if="item.some_condition==item._is_true">
      <li :name="item.id + '__UR'"> [[ item.some_variable_to_render ]] </li>
    </ol>
  </template>
  <p class="no-responses">No user responses</p>
  <button @click="add">Add values</button>
  <button @click="clear">Clear values</button>
</div>

Answer 2

请注意，boolVar 对应于包含布尔值的实际对象键

let model.flag = true

function foo(val) => {
  model.flag = val
  return val
}

<p> User Responses(s):</p>
<template>
  <div v-if="model.flag">
    <div v-for="item in UserResponses"   >
      <ol v-if="foo(item.Boolvar)" >
        <li :name="item.id + '__UR'"> [[ item.some_variable_to_render ] ]] </li>
      </ol>
    </div>
  </div>
  <h1 v-else>No user responses ?</h1>
</template>