问题:
I want to change image and that trigger an image update.
This is for example http://jsbin.com/kuluyike/3/edit?html,js,output
<div id="colorPicker">
<img...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I want to change image and that trigger an image update.
This is for example 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'
}
]
}
});
But this is not working on Vue.js version 2.x
How do I change the code so working based on version 2.x
回答1:
In Vue 2.0, the syntax has changed for attributes, this means, you now have to declare your attributed as the following:
<img :src="color" :alt="color">
<input type="radio" :id="name" :name="color" v-model="color" :value="image">
In Vue 2.0, the syntax for loops has changed from v-repeat
to v-for
::
<li v-for="(colorInfo, index) in colors">
<input type="radio" :id="colorInfo.name" name="color" v-model="color" :value="colorInfo.image">
In Vue 2.0 development mode, a warning is emitted when you access an undeclared property
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>
See also: Migration from Vue 1.x - Vuejs
回答2:
You can use v-for
here for looping in Vue 2.x like:
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>