v-for(vue.js)에서 데이터를 읽는 방법은 무엇입니까?

v-for(vue.js)에서 데이터를 읽는 방법은 무엇입니까?

다음 v-f에 해당하는 경우:

  <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에서 3번째 div의 "Details" 버튼을 클릭하면 3번째부터 {result.title} 데이터를 가져오려고 합니다.가능합니까?Vue.js 설명서를 읽고 있지만 DOM의 데이터를 읽는 것에 대해 아무것도 찾지 못했습니다. 만약 불가능하다면 Vue.js 없이 어떻게 해야 합니까?다른 방법이 있습니까?주요 목표는 이 데이터를 가져와 다른 웹 페이지로 전달하는 js 개체에 넣는 것입니다.

인덱스 키를 전달해야 하며 결과 위치에서 가져오기 위해 사용합니다.

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>

그리고 메소드는 인덱스 키를 얻을 것이고 여기서 나는 콘솔을 사용하여 당신이 원하는 결과를 보았습니다.원하는 대로 사용할 수 있습니다.

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

따라서 다음 v-f가 주어질 경우:

 <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);
     });
     }
   });

결과 배열에서 액세스할 데이터를 가져오려면 v-for 루프의 인덱스를 사용합니다.

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

여기 https://v2.vuejs.org/v2/guide/list.html 에서 문서를 확인할 수 있습니다.

또한 v-for 뒤에 키 특성을 추가하여 vue.js가 각 결과를 추적할 수 있도록 하는 것이 좋습니다. https://v2.vuejs.org/v2/guide/list.html#key 을 참조하십시오.

언급URL : https://stackoverflow.com/questions/52238463/how-to-read-data-from-a-v-for-vue-js