When radio selected, change image src on vue.js version2

问题: 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>

  • 发表于 2018-07-09 14:07
  • 阅读 ( 235 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除