Vue v-for:使用数组中的事件处理程序 (@change) 动态填充 HTML 到组件模板中

Question

这是我目前的设置：

.HTML

<question
v-for="question in questions"
v-bind:id="question.id"
v-bind:title="question.title"
v-bind:statement="question.statement"
v-bind:interaction="question.interaction"
@onchange-vg="onChangeVg"/>
</question>

<question>的定义

var questionComponent = Vue.component('question', {
props: ['id', 'title', 'statement', 'interaction', 'currentQuestion'],
template: `
<div :id="'question-' + id">
<div class="flex my-3">
<div class="py-0"><span>{{ id }}</span></div>
<div>
<p>{{ title }}</p>
<div :class="{'hidden':(id !== this.$parent.currentQuestion), 'block':(id === this.$parent.currentQuestion)}">
<p>{{ statement }}</p>
<span v-html="interaction"></span>
</div>
</div>
</div>
</div>
`
});

Vue

var app = new Vue({
el: '#app',
data()  {
return {
vg: null,
currentQuestion: 1,
questions: [
{ 
id: 1, 
title: 'Question 1',
statement: 'Details for question 1',
interaction: `
<select ref="vb-art" @change="$emit('onchange-vg')">
<option disabled value="" selected>Make a choice</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
`
},
{
title: 'Question 2',
statement: 'Details for question 2',
interaction: `
<select ref="vb-art" @change="$emit('onchange-vg')">
<option disabled value="" selected>Make a choice</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>
`
},
], 
}
},
methods: {
onChangeVerguetungsart() {
console.log("Value: " + event.target.value);
currentQuestion++;
},
},
});

一切都很好。我的问题是，<select ref="vb-art" @change="$emit('onchange-vg')">中的事件处理程序@change不会触发。

如果我从interaction一切都正常工作<span v-html="interaction"></span>替换整个<select ref="vb-art" @change="$emit('onchange-vg')">...</select>代码。

互动可能因问题而异。它可以是一个 、 或只是一个简单的链接。这就是为什么我尝试将代码放入数组而不是组件定义中。

如何解决此问题，以便<span v-html="interaction"></span>接受数组值传递的代码段中的事件处理程序？

Answer 1

你应该避免v-html. v-html 绑定只是普通的 HTML，而不是 Vue 指令。

对于您来说，v-html 不是必需的。从交互属性中制作选项数组，并通过 vue 模板生成标记。

interaction: [
{value: 'red', label: 'Red'},
{value: 'blue', label: 'Blue'}
]

并在您的组件中

<select ref="vb-art" @change="$emit('onchange-vg')">
<option disabled value="" selected>Make a choice</option>
<option v-for="{value, label} in interaction" :key="value" :value="value">{{ label }}</option>
</select>

更新： 如果您有动态内容，那么老虎机就是您的朋友。(参考文档 https://v2.vuejs.org/v2/guide/components-slots.html 更多示例(

您的组件：

<div>
<p>{{ title }}</p>
<div>
<p>{{ statement }}</p>
<slot />
</div>
</div>

和用法

<question
v-for="question in questions"
v-bind:id="question.id"
v-bind:title="question.title"
v-bind:statement="question.statement"
v-bind:interaction="question.interaction"
>
<select ref="vb-art" @change="onChangeVg">
<option disabled value="" selected>Make a choice</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</question>

好处是，你不需要发出任何东西。

顺便说一句，使用这个.$parent也不是qood的想法。您的组件与父组件耦合。请改用道具。