계산된 속성 집합이 Vue에서 호출되지 않음
나는 계산된 according according according 、 음음 、 음음 、 음음 、 음음 、 음 according according according 。v-modelset 메서드를 만, 제 get/set 메서드가 하지 않습니다.vue에서는 get/set 메서드가 동작하지 않습니다.
export default{
template: `
<form class="add-upload" @submit.prevent="return false">
<label><input type="checkbox" v-model="options.test" /> test </label>
</form>
`,
computed: {
options: {
get(){
console.log('get');
return {test: false};
},
set(value){
console.log('set');
},
},
}
}
★★★★★★★★★★★★★★.set입력 확인/확인 해제 시 호출되지 않습니다. ★★★★★★★★★★★★★★★★★.get이치노
편집: 로컬 스토리지에 의존하고 있는 코멘트를 읽은 후 Vuex 접근 방식을 사용하여 로컬 스토리지를 처리하는 것이 좋습니다.(https://www.npmjs.com/package/vuex-persist)이렇게 하면 로컬 스토리지는 항상 앱에 연결되므로 매번 getItem/setItem을 조작할 필요가 없습니다.
당신의 접근 방식을 보면, 데이터 속성보다 계산된 속성을 사용해야 할 이유가 있다고 생각합니다.
이 아무데도 되지 않은 합니다.get무엇을 그 할 수 .set핸들러
get ★★★★★★★★★★★★★★★★★」set는 공통 참조에 링크되어 있어야 합니다.많은 사람들이 제안했듯이 데이터 속성 또는 앱의 진실 소스(Vuex 인스턴스가 매우 좋은 예입니다).
하면 의 이 this는v-modelset이치노
다음은 작동 중인 바이올린의 설명입니다.
Vuex 사용 시
const store = new Vuex.Store({
state: {
// your options object is predefined in the store so Vue knows about its structure already
options: {
isChecked: false
}
},
mutations: {
// the mutation handler assigning the new value
setIsCheck(state, payload) {
state.options.isChecked = payload;
}
}
});
new Vue({
store: store,
el: "#app",
computed: {
options: {
get() {
// Here we return the options object as depicted in your snippet
return this.$store.state.options;
},
set(checked) {
// Here we use the checked property returned by the input and we commit a Vuex mutation which will mutate the state
this.$store.commit("setIsCheck", checked);
}
}
}
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}<div id="app">
<h2>isChecked: {{ options.isChecked }}</h2>
<input type="checkbox" v-model="options.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex@2.0.0"></script>데이터 속성 포함
new Vue({
el: "#app",
data: {
options: {
isChecked: false
}
},
computed: {
computedOptions: {
get() {
return this.options;
},
set(checked) {
this.options.isChecked = checked;
}
}
}
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}<div id="app">
<h2>isChecked: {{ computedOptions.isChecked }}</h2>
<input type="checkbox" v-model="computedOptions.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>당신의 접근 방식은 조금 특별하지만, 다시 말하지만, 그렇게 하는 데는 이유가 있을 것입니다.
computed프로펠러 , /setter로 , "Getter/setter", "Getter/setter", "Getter/setter"localStorage항목 및 (서브속성의 변경을 검출하는) 딥워처localStorage이렇게 계속 쓸 수 요.v-model개체의 하위 속성에 대한 변경 사항을 관찰하면서 로컬 데이터 프로포트를 사용합니다.
순서:
- 프로펠러: " " " " )를 선언합니다.
options인 that ) 、 ) 、 ) 、 ) 、 ) ) ) ) ) )localStorage:
export default {
data() {
return {
options: {}
}
},
mounted() {
const myData = localStorage.getItem('my-data')
this.options = myData ? JSON.parse(myData) : {}
},
}
- 프로펠러에 합니다(「」).
options「」을 클릭합니다.deep=true★★★★★★★★★★★★★★★★★」handler「」를 하는localStorage다음 값을 사용합니다.
export default {
watch: {
options: {
deep: true,
handler(options) {
localStorage.setItem('my-data', JSON.stringify(options))
}
}
},
}
아주 간단한 설명은 여기 암호로 되어 있습니다.계산된 속성은 다른 데이터/데이터 변수에 따라 달라집니다.반응 속성이 값을 변경하고 동일한 속성이 다른 계산 속성을 계산하는 데 사용되는 경우에만 계산된 속성이 반응 특성이 됩니다.
이렇게 하면 값을 설정하고 setter 메서드와 getter 메서드를 사용할 수 있습니다.
new Vue({
el: '#app',
data: {
message: 'Use computed property on input',
foo:0,
isChecked:true
},
computed:{
bar:{
get: function(){
return this.foo;
},
set: function(val){
this.foo = val;
}
},
check:{
get: function(){
return this.isChecked;
},
set: function(val){
this.isChecked = val;
}
}
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }} Text</p>
<input type="text" v-model="bar" />
{{bar}}
<br/>
<p>{{ message }} Checkbox</p>
<input type="checkbox" v-model="check" />
{{check}}
</div>문제는 둘 다의 존재에 있는 것 같다optionsgetter의 반환값입니다.
다음과 같이 시도해 볼 수 있습니다.
let options;
try {
options = JSON.parse(localStorage.getItem("options"));
}
catch(e) {
// default values
options = { test: true };
}
function saveOptions(updates) {
localStorage.setItem("options", JSON.stringify({ ...options, ...updates }));
}
export default{
template: `
<form class="add-upload" @submit.prevent="return false">
<label><input type="checkbox" v-model="test" /> test </label>
</form>`,
computed: {
test: {
get() {
console.log('get');
return options.test;
},
set(value) {
console.log('set', value);
saveOptions({ test: value });
},
},
}
}
이게 도움이 됐으면 좋겠다.
여기서 사용할 수 있는 계산 집합 방법이 있는지 잘 모르겠지만, 문제를 해결하기 위한 몇 가지 다른 방법이 있습니다.
데이터를 변환하기 위한 단일 getter를 원하는 경우 이벤트 기반 방법을 사용하여 데이터를 설정할 수 있습니다.이 방법은 제가 가장 좋아하는 방법입니다.
export default {
template: `
<form class="add-upload" @submit.prevent="">
<label for="test"> test </label>
{{options.test}}
<input id="test" type="checkbox" v-model="options.test" @input="setOptions({test: !options.test})"/>
</form>
`,
data() {
return {
optionsData: {
test: false
}
}
},
computed: {
options: {
get() {
return this.optionsData;
},
},
},
methods: {
setOptions(options) {
this.$set(this, "optionsData", { ...this.optionsData, ...options })
}
}
}
get/set에서 실제로 아무것도 하지 않는 경우 데이터 옵션을 사용할 수 있습니다.
export default {
template: `
<form class="add-upload" @submit.prevent="">
<label for="test"> test </label>
{{options.test}}
<input id="test" type="checkbox" v-model="options.test" />
</form>
`,
data() {
return {
options: {
test: false
}
}
}
}
또한 모든 자산에 대해 get/set 옵션이 있습니다.
export default {
template: `
<form class="add-upload" @submit.prevent="">
<label for="test"> test </label>
{{test}}
<input id="test" type="checkbox" v-model="test" />
</form>
`,
data() {
return {
optionsData: {
test: false
}
}
},
computed: {
test: {
get() {
return this.optionsData.test;
},
set(value) {
this.optionsData.test = value
}
},
},
}
Vue 계산 속성의 반환 값은 자동으로 반응하지 않습니다.일반 개체를 반환하고 계산된 속성 내의 속성에 할당하기 때문에 설정기는 트리거되지 않습니다.
해결해야 할 두 가지 문제가 있습니다. 한 가지 문제 해결 방법은 계산된 속성 값의 반응형 버전을 저장하는 것입니다( 참조).Vue.observable()다음 문제는 좀 더 미묘한 문제입니다.왜 세터에 접속하고 싶은지 알고 싶습니다.더 많은 정보가 없다면 부작용을 일으키려고 하는 것 같아요이 경우 변경에 대한 값을 확인해야 합니다( 참조).vm.$watch()).
위의 가정을 바탕으로 이 컴포넌트를 작성하는 방법은 다음과 같습니다.
export default {
template: `
<form class="add-upload" @submit.prevent="return false">
<label><input type="checkbox" v-model="options.test" /> test </label>
</form>
`,
computed: {
options(vm) {
return (
vm._internalOptions ||
(vm._internalOptions = Vue.observable({ test: false }))
)
},
},
watch: {
"options.test"(value, previousValue) {
console.log("set")
},
},
}
만약 당신이 어떤 변화들에 기반하여 부작용을 유발해야 한다면options깊게 보실 수 있습니다.그러나 가장 큰 경고는 오브젝트가 반응적이어야 한다는 것입니다(해결 방법:Vue.observable()또는 에 정의되어 있습니다.data옵션)을 클릭합니다.
export default {
watch: {
options: {
handler(value, previousValue) {
console.log("set")
},
deep: true,
},
},
}
언급URL : https://stackoverflow.com/questions/62943179/reference-type-values-not-updating-in-localstorage-with-two-way-data-binding-in
'source' 카테고리의 다른 글
| 함수 반환을 사용하여 vue에서 div의 스타일을 정의할 수 있습니까? (0) | 2022.08.29 |
|---|---|
| 문자열 보간 Vue js (0) | 2022.08.29 |
| Java에서 사용할 수 있는 변수를 Gradle에서 선언할 수 있습니까? (0) | 2022.08.29 |
| Java에서는 어레이가 값으로 전달됩니까, 참조로 전달됩니까? (0) | 2022.08.29 |
| Function pointer를 사용하면 프로그램이 느려집니까? (0) | 2022.08.29 |