Как вернуть значение из строки таблицы в цикле v-for в Vue?

Question

Я хочу вернуть значение («Заголовок») из строки таблицы (генерируемой циклом v-for), когда нажимается кнопка в этой строке, но я не могу определить правильный метод. Я могу console.log значение щелкнуть, но не могу заставить его фактически вернуть значение в браузере.

Я пробовал много разных методов, и ни один из них не работает. Я также получаю следующую ошибку, когда использую {{clicked (row)}} для отображения возвращенного значения в моем HTML:

«Свойство или метод« строка »не определены в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство."

Это не сработает, если я уберу аргумент "row".

Этот метод записывает правильное значение в консоль, но не возвращает значение в браузере:

methods: {
clicked(row) {
console.log(row.title);
return (row.title);
}

Я потратил несколько дней, пытаясь выяснить это - любая помощь очень ценится!

HTML

<div id="app">
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Price</th>
                <th>Add To Cart</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="row in rows">
                <td>{{ row.title }}</td>
                <td>{{ row.price }}</td>
                <td><button @click="clicked (row)">Add To Cart</button></td>
            </tr>
        </tbody>
    </table>
    <p>{{ clicked(row) }}</p>
</div>
</div>

JS

var app = new Vue({
el: "#app",
data: {
rows: [{
    id: 001,
    title: "Lorem",
    price: 5
  },
  {
    id: 002,
    title: "Ipsum",
    price: 23
  },
  {
    id: 003,
    title: "Dolor",
    price: 8
  },
 ]
},
methods: {
clicked(row) {
  console.log (row.title);
  return (row.title);
}
}
})

Я пытаюсь отобразить значение «Заголовок», когда нажимаю кнопку в его строке. (И если я нажму на обе строки, я хочу, чтобы отображались оба «Заголовка»).

В настоящее время я получаю только различные ошибки.

Answer 1

В данный момент у вас есть clicked(row) в теге <p> вашего шаблона. Но, поскольку вы не определили свойство row для экземпляра vue и находитесь вне области действия тега v-for, вы получаете сообщение об ошибке «Свойство или метод« строка »не определена».

Что <p>{{ clicked(row) }}</p> говорит Vue, так это то, что всякий раз, когда шаблон обрабатывается или перерисовывается, вызывается метод clicked экземпляра Vue (передавая несуществующее свойство row) и отображается все, что возвращается этим методом. ,

Вам нужно установить значение, которое будет отображаться при каждом нажатии одной из кнопок. Вы должны добавить отдельное свойство, скажем, displayTitle, в вашу функцию данных, которую вы можете установить в своем методе clicked. Затем просто используйте displayTitle в своем теге <p>.

Вот пример:

new Vue({
  el: "#app",
  data() {
    return {
      rows: [
        { id: 001, title: "Lorem", price: 5 }, 
        { id: 002, title: "Ipsum", price: 23 }, 
        { id: 003, title: "Dolor", price: 8 }
      ],
      displayTitle: ''
    }
  },
  methods: {
    clicked(row) {
      this.displayTitle = row.title;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Price</th>
        <th>Add To Cart</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows">
        <td>{{ row.title }}</td>
        <td>{{ row.price }}</td>
        <td><button @click="clicked(row)">Add To Cart</button></td>
      </tr>
    </tbody>
  </table>
  <p>{{ displayTitle }}</p>
</div>

** Примечание: рекомендуется всегда определять экземпляр Vue с помощью функции data, которая возвращает объект вместо свойства data, как в примере кода.