如何从 v-for (vue.js) 读取数据？

Question

给定下一个 v-for：

  <div class="container-fluid" id="networdapp" style="display:none;">
     <div class="row" >
       <div v-for="result in results" class="col-sm-6" >
         <div class="card m-3 h-240  bg-light" >
         <div class="card-header text-center" > {{ result.title }} </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info" @click="getData(result)" >Details</a>
             </div>
         </div>
      </div>
      </div>
     </div>

还有下一个 Vue.js 脚本：

   <script type="text/javascript">
  const vm = new Vue({
   el: '#networdapp',
    data: {
     results:[]
    },

    methods: {

    getData: function(result){
    window.alert($(this).parents("#networdapp").find(".card-header.text-center").outerHTML);
    window.alert(document.getElementsByClassName("card-header").outerHTML);
    window.alert(result.outerHTML);
     }

    },

     mounted() {
   axios.get('/getJson')
     .then(response => {
    this.results = response.data;
    })
      .catch( e => {
   console.log(e);
     });
     }
   });

     </script>

我想从特定迭代中获取数据，假设我从 v-for 中单击第三个 div 的“详细信息”按钮，我想从第三个 for 中获取 {{result.title }} 数据。有可能吗？我一直在阅读 Vue.js 文档，但没有找到任何关于从 DOM 读取数据的信息。如果不可能，那么如果没有 Vue.js，我怎么能做到这一点？还有其他选择吗？ ? 主要目标是获取这些数据并将其放入一个 js 对象中，然后将其传递给另一个网页。

Answer 1

您必须传递索引键并使用是从结果的位置获取。

将for循环的div改成

<div  v-for="(result,i) in results" :key="i" class="col-sm-6" >

也改变方法参数

<a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>

并且该方法将获取索引键，在这里我使用控制台查看了您想要的 result.title。你可以随心所欲地使用它。

getData: function(key){
console.log(this.results[key].title)
 }

所以 给定下一个 v-for：

 <div class="container-fluid" id="networdapp" style="display:none;">
     <div class="row" >
       <div  v-for="(result,i) in results" :key="i" class="col-sm-6" >
         <div class="card m-3 h-240  bg-light" >
         <div class="card-header text-center" > {{ result.title }} </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>
             </div>
         </div>
      </div>
      </div>

还有下一个 Vue.js 脚本：

<script type="text/javascript">
  const vm = new Vue({
   el: '#networdapp',
    data: {
     results:[]
    },

    methods: {

    getData: function(key){
    console.log(this.results[key].title)
     }

    },

     mounted() {
   axios.get('/getJson')
     .then(response => {
    this.results = response.data;
    })
      .catch( e => {
   console.log(e);
     });
     }
   });

Answer 2

要在结果数组中获取要访问的数据，可以在 v-for 循环中使用索引

v-for="(result, index) in results"

你可以在这里查看文档https://vuejs.org/v2/guide/list.html

我也强烈建议你在 v-for 之后添加一个 key 属性来帮助 vue.js 跟踪每个结果，请参阅https://vuejs.org/v2/guide/list.html#key