如何从 v-for (vue.js) 中读取数据?
How to read data from a v-for (vue.js)?
给出下一个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-中第 3 个 div 的 "Details" 按钮,因为我想获取 {{result.title }} 来自第 3 个 for.Is 的数据可能吗?我一直在阅读 Vue.js 文档,但我没有找到任何关于从 DOM.If 读取数据的信息,这是不可能的,比没有 Vue.js 我该怎么做?还有其他选择吗?
主要目标是获取此数据并将其放入 js 对象并将其传递给另一个网页。
要在结果数组中获取要访问的数据,可以在 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
你必须传递索引键并使用是从结果的位置得到。
将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);
});
}
});
给出下一个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-中第 3 个 div 的 "Details" 按钮,因为我想获取 {{result.title }} 来自第 3 个 for.Is 的数据可能吗?我一直在阅读 Vue.js 文档,但我没有找到任何关于从 DOM.If 读取数据的信息,这是不可能的,比没有 Vue.js 我该怎么做?还有其他选择吗? 主要目标是获取此数据并将其放入 js 对象并将其传递给另一个网页。
要在结果数组中获取要访问的数据,可以在 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
你必须传递索引键并使用是从结果的位置得到。
将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);
});
}
});