Почему ругается на Unexpected 'v-bind' before ':'?

Question

[dimonfreeman]

Пробовал вместо template и туда вставить key и bind = все супер.
Но мне не нужно все в div обворачивать...
и сыпет две ошибки
error Unexpected 'v-bind' before ':' vue/v-bind-style
error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key

<template
        v-for="start in starts"
      >
        <input
          :id="input_q + '-star-' + start.id"
          :name="input_q"
          :value="start.id"
          v-bind:key="start.id"
          type="radio"
        >
        <label
          :for="input_q+'-star-'+start.id"
        >{{ start.id }}</label>
      </template>

Answer 1

[Aetae]

v-bind: это то же самое что :. А key должен стоять на каждом итерируемом элементе. Уникальный для каждого элемента. Это очевидно, если понимать нахрена он вообще нужен(для обновления только тех кусков, что действительно обновились и сохранения тех, что не изменились).
Т.е. key тебе нужен ещё и на label.

Comments

[dimonfreeman]

спасибо, забыл за label

[Aetae]

dimonfreeman, кстати с тем же успехом можно просто обернуть input в label, заодно for будет не нужен.)

Answer 2

[Red_Devi1]

Напишите просто :key="start.id", а вообще, читайте доку

Comments

[dimonfreeman]

как бы пробовал..
и читал доку и там да написано :key

пишу кей
пишет,
error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key

[Red_Devi1]

dimonfreeman

<div>
	<input v-for="start in starts" :key="start.id"
		:id="input_q + '-star-' + start.id"
		:name="input_q"
		:value="start.id"
		type="radio"
	>
</div>

[dimonfreeman]

Red_Devi1, там же ещё label, если сделать так вы написали будут сначала инпуты потом лейбы не совсем корректно.
такой вариант тоже пробовал..

[Red_Devi1]

dimonfreeman, сделайте итерацию по диву, к нему же добавляйте ключ, внутри отрисовывайте что Вам нужно

[dimonfreeman]

Red_Devi1, по диву я пробовал и да оно не дает ошибки...
но по диву перестают лейбы работать по :checked так как там связь с прошлыми элементами.
по этому суть вопроса что бы логика оставалась такая и дальше.

..>
input
label
input
label
input
label ...

[WapSter]

Дожили, раньше люди не учили js лезли в фреймворк, теперь и css не знают

[dimonfreeman]

WapSter, вот образец пример как работают звездочки. и если их обвернуть в div то они не зависят друг от друга
https://jsfiddle.net/cn25j3gv/
а должно быть вот так,
https://jsfiddle.net/api/post/library/pure/
и все прошлые закраситься

[WapSter]

dimonfreeman, зачем подобную логику отдавать на css? не проще сделать на js тупо переключая класс?