Робота с инпутом в vue. Смена имени юзера в через инпут

Question

Дам ссилку на JsFiddle, розкажу проблему, я вивел список имен юзеров на страницу с помощю fetch, и добавил каждому из них инпут, перед именем человека в даном ему инпуте хочу написать новое имя чтоб оно заменилось, но у меня получаеться только с последним елементом, помогите решить проблему, буду благодарен.

Ссилка на проект: `https://jsfiddle.net/t85eakwc/2/`

Answer 1

Примерно вот так

var app = new Vue({
      el: '#app',
      data() {
        return {
          users: [{
              id: 1,
              name: "lemon"
            },
            {
              id: 3,
              name: "apple"
            },
            {
              id: 4,
              name: "pear"
            },
            {
              id: 5,
              name: "orange"
            },
          ],
        }
      },
      methods: {
        changeItemName(index) {
          this.users[index].name = document.getElementById(`userInput${index}`).value;
        }
      },
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
      <div v-for="(user, index) of users">
        {{user.name}} 
        <input :id="`userInput${index}`" type="text" @keyup.enter="changeItemName(index)">
      </div>
    </div>

БЛОГ НА HUSL

Робота с инпутом в vue. Смена имени юзера в через инпут

Ответы (1 шт):