Прошу помощи с инпутом у VueJs

Question

Проблема в том, что я вывел список на страницу и добавил инпут, чтобы менять имя юзера, но что-то не так и меняет только последний инпут, и далее все инпуты меняются только по последнему, прошу вашей помощи.

const App = {
  data() {
    return {
      title: "Fetch data",
      url: "https://jsonplaceholder.typicode.com/users",
      original: [],
      newArr: [],
    }
  },
  mounted() {
    this.getUsers()
  },
  methods: {
    async getUsers() {
      const response = await fetch(this.url)
      const data = await response.json()
      this.original.push(...data)
      // console.log(data);
    },
    changeItemName(item) {
      item.name = this.$refs.value
    }
  }
}

Vue.createApp(App).mount("#container")

<div id="container" class="container">
  <h1>{{ title }}</h1>
  <ul v-for="(item, idx) in original" :key="item.id">
    <li> {{ item.name }} {{ item.id }}
      <input type="text" @keyup.enter="changeItemName(item)">
    </li>
  </ul>
</div>

Answer 1

В input пробрось $event <input type="text" @keyup.enter="changeItemName(item, $event)"> А в самой функции changeItemName получай значение так

changeItemName(item, e) {
  item.name = e.target.value
}

БЛОГ НА HUSL

Прошу помощи с инпутом у VueJs

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