vue js与flask jinja2冲突数据渲染

Question

我有代码并在参考下面跟进，但在使用重复时不会影响 -

<p v-for="item in questionDataSet.options">
  <label>
  <input name="question-data-row" type="radio" 
    v-model="requestData.surveyDetails.answerSelection" value="{{item.key}}">
  <span>{{item.value}}</span>

这里的 {{item.key}} 在更新了 jinja2 模板绑定时无法在单选值中工作，但 {{item.value}} 仍然显示良好。

我的 JSON 数据集供参考 -

{"options": [{"key": "A", "value": "Lucknow"}, {"key": "B", "value": "New Delhi"}, {"key": "C", "value": "Ahmedabad"}, {"key": "D", "value": "Patna"}], "question": "India’s first ever ‘Khadi Haat’ has launched in which city?"}

我已关注此link 以寻求解决方案，但无法完全发挥作用。

Answer 1

在属性中，使用v-bind（或其简写形式:），而不是插值。所以，而不是：

value="{{item.key}}"

做：

:value="item.key"

例子：

<input name="question-data-row" type="radio" 
                    v-model="requestData.surveyDetails.answerSelection" :value="item.key">