반응형
Vue.js - 어레이 오브젝트에 계산 속성을 구현하는 방법
Vue 인스턴스 내에 개체 배열이 있으며 각 항목에 대해 계산된 속성을 작성하려고 합니다.
각 개체에는 다음 두 가지 속성만 있습니다.firstName
그리고.lastName
. 나는 이름이 'fullName'인 각각의 Calculated 속성을 쓰고 싶다. 이것은 단지 연결일 뿐이다.firstName
그리고.lastName
.
Vue 인스턴스의 데이터 객체 속성에 대해 계산된 속성을 구현하는 것은 익숙하지만 어레이 요소를 구현하면 혼란스러워집니다.
현재 코드는 다음과 같습니다.
var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
}
}
methods: {
toggle: function(name) {
name.done = !name.done;
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in names'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ fullName(name) }}</span>
<del v-else>{{ fullName(name) }}</del>
</li>
</ol>
</div>
그리고 여기 각각의 jsFiddle이 있습니다.
사용할 수 있습니다.fullname
대신 방법으로서computed
속성:
var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {
},
methods: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
},
toggle: function(name) {
name.done = !name.done;
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in names'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ fullName(name) }}</span>
<del v-else>{{ fullName(name) }}</del>
</li>
</ol>
</div>
또 다른 해결책은 루프를 통해names
연결함으로써 계산된 속성 내의 배열firstname
그리고.lastname
그 후 이 어레이를 반환하고 템플릿 내에서 루프합니다.
var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {
fullNames() {
return this.names.map(name => {
let fl = {};
fl.fname = name.firstName + ", " + name.lastName;
fl.done = name.done;
return fl;
})
}
},
methods: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
},
toggle: function(name) {
name.done = !name.done;
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in fullNames'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ name.fname }}</span>
<del v-else>{{ name.fname }}</del>
</li>
</ol>
</div>
'계산'을 매개 변수와 함께 사용할 수 없습니다.대부분의 경우 다음과 같은 방법을 사용합니다.
예
<span>{{ fullName('Hi') }}</span>
methods: {
fullName(param) {
return `${this.param} ${this.firstName} ${this.lastName}`
}
}
언급URL : https://stackoverflow.com/questions/53396969/vue-js-how-to-implement-computed-properties-on-objects-of-array
반응형
'programing' 카테고리의 다른 글
Java String interning이란 무엇입니까? (0) | 2022.07.09 |
---|---|
Vue: 계산 대 데이터(), vuex 바인딩에 대해? (0) | 2022.07.09 |
sprintf()는 자동 메모리 할당 기능을 갖추고 있습니까? (0) | 2022.07.09 |
상태, 커밋, 디스패치 및 게터에 의존하는 Vuex 액션을 테스트(모카)하려면 어떻게 해야 합니까? (0) | 2022.07.09 |
C에서의 어레이 초기화에서는 대괄호는 무엇을 의미합니까? (0) | 2022.07.09 |