Vue.js - 如何使用这个布尔表达式？

Question

我看到此数据集中使用了以下表达式，想知道它如何在 Vue.js?

中计算为真或假

visibleIf: "{satisfaction-score} = 4"

在我的示例中，第一个问题被隐藏了，我不确定为什么？

test: [
    {
      name: "satisfaction-score",
      title: "How would you describe your experience with our product?",
      element: "Radio",
      value: 5,
      options: [
        { value: 5, text: "Fully satisfying" },
        { value: 4, text: "Generally satisfying" },
      ],
    },
    {
      name: "what-would-make-you-more-satisfied",
      title: "What can we do to make your experience more satisfying?",
      element: "Input",
      value: "",
      visibleIf: "{satisfaction-score} = 4",
    },
  ],

<div v-for="t in test" :key="t.name">
  <component :is="t.element" :t="t" v-if="t.visibleIf"></component>
</div>

https://surveyjs.io/Documentation/Library?id=design-survey-create-a-multi-page-survey#configure-page-visibility

我正在使用 surveyjs 作为灵感，因为我不知道如何根据从对象 A 中选择的选项来控制对象 B 的可见性。任何想法都会很棒。谢谢

Answer 1

第一个问题未呈现的原因是它没有 visibleIf 属性。所以在这种情况下它将 return false

您仅在 t.visibleIf 时渲染：<component :is="t.element" :t="t" v-if="t.visibleIf"></component>

在所有情况下，当您有一个具有此名称的属性时，问题都会呈现。

（您只分配了一个 =。如果您想检查满意度得分是否高于或低于某个值，您应该使用 == 或最好使用 ===。为此实际工作你需要做一些改变。一种方法是使用像这样的反引号来进行检查：

`${satisfaction-score} === 4`

satisfaction-score 必须在某处设置才能工作）

Vue.js - 如何使用这个布尔表达式？

Vue.js - How do I use this Boolean expression?

vuejs2