1

Почему не рендерится свойство value чекбокса?

Хочу сделать так, чтобы в свойство value="" чекбокса, подставлялось свойство name итерируемого объекта. А оно не подставляется. Уже и v-bind'ом пробовал, и {{}}. Не хочет подставлять и всё! Рендерит так: <input type="checkbox" value="item.name">

Может потому что в name встречается кириллица?

<tr v-for="(item, index) in tags" :key="index">
    <td class="checkbox">
       <input type="checkbox" value="item.name" v-model="checkedNames">
    </td>           
    <td class="tag">{{item.name}}</td>           
</tr>

1 ответ 1

1

:value так пробовали?

new Vue({
  el: '#test',
  data() {
    return {
      tags:[
        {name:"1"},
        {name:"2"},
      ]
    }
  },
  mounted(){
    console.log(
       Array.from(document.querySelectorAll('input[type=checkbox]')).map(el =>
            el.value
       )
    );
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<table id='test'>
  <tr v-for="(item, index) in tags" :key="index">
      <td class="checkbox">
         <input type="checkbox" :value="item.name">
      </td>           
      <td class="tag">{{item.name}}</td>           
  </tr>
  </table>

6
  • И так :value="item.name" и так :value="{name: item.name}" и c этой конструкцией {{}} - не работает(
    – Vlad
    24 июл 2017 в 8:47
  • @Vlad Сделал сниппет, у меня работает..
    – Darth
    24 июл 2017 в 8:55
  • Ой, спасибо Вам большое! Часа два мучаюсь)) Ваш первый вариант сразу заработал, это я тупанул с вебпаком немного.
    – Vlad
    24 июл 2017 в 8:58
  • @Vlad а подробней можно? Что именно вызвало баг? Я просто тоже webpack использую, интересно на что можно напороться
    – Darth
    24 июл 2017 в 9:06
  • Я тут уже задавал вопрос, как фронтенд и бэкэнд vue + node в одном проекте совместить - мне никто не ответил. Ну я сам нашёл простенький бойлерплейт у чувака github.com/afterburn/node-vue чтобы легче разобраться было, сделал на его основе свой. Так вот, вебпак с текущими настройками вроде всё релоадит, модули обновляет без релоада и стили инжектит. Как оказалось всё, кроме изменений v-bind. Для них вручную обновить страницу пришлось - тогда всё начало рендерится. А то подставлялось мне value="item.name". Привык, что всё обновляется само, а тут такой подвох.
    – Vlad
    24 июл 2017 в 9:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.