选择单选时，在 vue.js 版本2 上更改图像 src

Question

我想更改图像并触发图像更新。

例如 http://jsbin.com/kuluyike/3/edit?html,js,output

<div id="colorPicker">
<img v-attr="src:color" alt="{{color}}">
<ul>
<li v-repeat="colors">
<label>
<input type="radio" id="{{name}}" name="color" v-model="color" value="{{image}}">
{{name}}
</label>
</li>
</ul>
</div>

var cp = new Vue({
el: '#colorPicker',
data: {
colors: [
{
name: 'red',
image: 'red.jpg'
},
{
name: 'pink',
image: 'pink.jpg'
},
{
name: 'blue',
image: 'blue.jpg'
}
]
}
});

但这不适用于 Vue.js 2.x 版

如何更改代码以便基于版本 2.x 工作

Answer 1

在 Vue 2.0 中，属性的语法发生了变化，这意味着，你现在必须将你的属性声明如下：

<img :src="color" :alt="color">
<input type="radio" :id="name" :name="color" v-model="color" :value="image">

在 Vue 2.0 中，循环的语法从v-repeat更改为v-for：：

<li v-for="(colorInfo, index) in colors">
<input type="radio" :id="colorInfo.name" name="color" v-model="color" :value="colorInfo.image">

在 Vue 2.0 开发模式下，当你访问未声明的属性时会发出警告

data: {
// ...
color: undefined,
},

var cp = new Vue({
el: '#colorPicker',
data: {
color: undefined,
colors: [
{
name: 'red',
image: 'red.jpg'
},
{
name: 'pink',
image: 'pink.jpg'
},
{
name: 'blue',
image: 'blue.jpg'
}
]
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="colorPicker">
<img :src="color" :alt="color">
<ul>
<li v-for="(colorInfo, index) in colors">
<label>
<input type="radio" :id="colorInfo.name" name="color" v-model="color" :value="colorInfo.image">
{{colorInfo.name}}
</label>
</li>
</ul>
</div>

另请参阅：从 Vue 1.x 迁移 - Vuejs

Answer 2

你可以在这里使用v-for在 Vue 2.x 中进行循环，如下所示：

new Vue({
el: '#colorPicker',
data: {
color: null,
colors: [{
name: 'red',
image: 'red.jpg'
},
{
name: 'pink',
image: 'pink.jpg'
},
{
name: 'blue',
image: 'blue.jpg'
}
]
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="colorPicker">
<img :src="color" :alt="color" v-if="color" />
<ul>
<li v-for="c in colors">
<label>
<input type="radio" name="color" v-model="color" :value="c.image"/>
{{c.name}}
</label>
</li>
</ul>
<p v-if="color"><b>Selected image name: </b> {{color}}</p>
</div>