javascript - 选择 radio 时，更改 vue.js version2 上的图像 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, the syntax has changed for attributes ，这意味着，您现在必须声明您的属性如下:

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

在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">

在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>

另请参阅:Migration from Vue 1.x - Vuejs