초기 값을 HTML에서 직접 사용할 수 있는 vue.js 모델로 설정합니다.
내 코드가 PHP에 있고, 변수가 있다고 가정합니다.
$checked = true;
그리고 이렇게 쓰고 있어요
<input v-model="subscribed" type="checkbox" <?= ($checked ? 'checked' : '') ?> />
이제 vue js 파일에 이 체크된 데이터로 모델을 채우려면 어떻게 해야 합니까?
subscribed값은 true 또는 false입니다.(PHP 코드로 js에 직접 값을 할당할 생각은 없습니다.다른 곳이 아닌 내부/입력 자체 설정이 필요합니다.)
코드 스니펫을 확인해 주세요.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<label>
<input id='sub' v-model="subscribed" @click="printState" type="checkbox" checked />
Subscription
</label>
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
subscribed: false,
// subscribed: sub.checked
// ^ this works but i dont want to add everytime id and get its value manually
}
},
created: function() {
var self = this;
setTimeout(function() {
console.log('Checkbox is having its initial value true/checked');
console.log(self.subscribed);
}, 1000)
},
methods: {
printState: function(){
console.log(this.subscribed)
}
}
});
</script>
</body>이제 데이터에 모델 변수를 추가해야 하지만 그 값도 제공해야 합니다.그 값을 지정하면 실제 값이 덮어쓰게 됩니다(그래서 작동하려면 처음에 DOM 요소에서 값을 매기는 설정입니다).sub.checkedsub는 dom.getelembyd가 가져온 dom 요소입니다.}하지만, 그 방법은 요소가 훨씬 더 많기 때문에 마음에 들지 않습니다(text|select|radio 등).
그래서 할 수 있는 방법은 없을까?subscribed입력 자체에서 자동으로 값이 선택됩니다.
이는 실현 가능한 경우 템플릿 외부에 논리를 배치해야 하므로 Vue의 정신에 맞지 않습니다.다만, 여기, 대부분의 상황에서 유효하게 기능하는 현명한 회피책이 있습니다.
<input
v-model="foobar"
:run="!foobar ? foobar = 1 : true"
/>
:run특별한 특성이 아니라 완전히 자의적인 거죠v-modeling의 가치를 정의하는 데 사용합니다.
이 경우 인덱스가 아직 존재하지 않는 어레이의 인덱스를 기반으로 v-modeling해야 했기 때문에 도움이 되었습니다.템플릿에서 v-modeling할 인덱스를 생성하고 있습니다.위의 회피책은 권장하지 않습니다.또한 잠재적인 부작용으로 사용할 경우 철저한 테스트를 권장합니다.단, 템플릿에서 값을 인라인으로 시작할 수 있습니다.
Vue실제로는, 에서 개시하도록 설계되어 있지 않습니다.HTML단, 하나의 접근방식은 명령어를 사용하여init가치관이는 Angular의 아이디어와 거의 같은 개념에 근거하고 있습니다.
Vue.directive('init', {
bind: function(el, binding, vnode) {
vnode.context[binding.arg] = binding.value;
}
});
기본적으로 binding 인수(아래 참조)를 사용하여 Vue 인스턴스에서 지정된 값으로 설정합니다.이 인수는 다음과 같이 사용할 수 있습니다.
<input v-model="subscribed" type="checkbox" v-init:subscribed="<?=($checked) ? 'true' : 'false'?>" />
그러나 몇 가지 주의사항이 있습니다. 첫째, 데이터 속성을 사전에 선언해야 합니다. 데이터 속성은 동적으로 삽입되지 않으며, 둘째, 모든 것이 다음과 같이 평가됩니다.JavaScript만약 당신이 하나에 들어갔고 마침내 그것문자열로시작하는 경우가 이해하지도 못할 래핑 할 필요가 있는 끈으로 init을 하고 싶은데,묶어야 합니다 따옴표로 작은.마지막으로 이해되지 않습니다.camelCase있다면을 설정하는 경우는, 제시하고 싶다.camelCase당신은 기입에 필요한 데이터 속성 쓸 필요가 있을 것이다 데이터 속성입니다.kebab-case로.camelCase그 지시에 전환.변환에 관한 명령어입니다.
JSFiddle의 최신 스니펫은 다음과 같습니다.https://jsfiddle.net/evnctym1/
다음은 백엔드 데이터를 Vue로 바인딩할 때 유용할 수 있는 몇 가지 가능한 개념입니다.
0. REST API를 구축하여 사용한다.
선호되는 접근법이지만 때로는 이것이 가능하지 않을 수 있다.예를 들어 백엔드 코드를 완전히 제어할 수 없는 경우입니다.
1. 글로벌 변수를 할당할 수 있습니다.
PHP/HTML을 사용하여 Vue 컨텍스트 내에서 데이터를 가져오려면:
<script>
var myDataFromPhp = {
stringExample: '<?php echo "Hello World!"; ?>',
objectExample: JSON.parse('<?php echo json_encode(["Hello again" => "Greetings from Mars!"]); ?>'),
}
</script>
Vue:
data: {
someString: window.myDataFromPhp && window.myDataFromPhp.stringExample? window.myDataFromPhp.stringExample : '',
someObject: window.myDataFromPhp && window.myDataFromPhp.objectExample? window.myDataFromPhp.objectExample : {},
},
아마도 단지 PHP 측면에서 더 예쁠 개체의 모든 데이털 일은.모든 데이터를 PHP 쪽에 있는 하나의 객체에 채워 두면 더 예뻐질 수 있습니다.당신은 또한만을 판매하며 정적하려고 그러는 것은 책을 읽은 적이 있다고 말한다 변수 명명:읽기 전용이며 정적임을 나타내는 변수 이름을 사용할 수도 있습니다 사용할 수 있다.var _OBJECT_EXAMPLE = ...
2. 만약 당신이 2안에 세계적인 변수 노출처럼. 내부 글로벌변수를 노출하고 싶지않은 경우를 느끼지 못한다.<script>tag태그
폼 데이터를 Vue에 바인드할 때 특정 상태에서 Vue 앱을 초기화할 때 다음과 같은 작업이 수행되었습니다.이것은 묶어야 할 작은 것이 하나 있다면 유용합니다.
Vue 앱 범위 내:
<input name="someInputData" type="hidden" :value="someInputData = 'Heya!'">
그런 다음 Vue 앱에서 데이터를 선언합니다.
data: {
someInputData: undefined, // NOTE: This one is initialised in template element input[name="someInputData"]
},
이게 비동기 부작용이 있는지는 잘 모르겠어요.주의하여 사용하고 테스트합니다.
3. 바닐라 JS:
HTML의 경우:
data: {
someInputData: document.getElementById('my-hidden-input')? document.getElementById('my-hidden-input').value : undefined,
}
고유한 DOM 요소만 있는지 확인하십시오. 그렇지 않으면 데이터가 모두 잘못될 수 있습니다.
@craig_h 답변에 근거한 개선
Vue.directive('init', {
bind (el, binding, vnode) {
vnode.context[binding.arg] = binding.value;
}
})
Vue.new({
data: {
name: undefined,
}
}
<input v-model="name" v-init:name="'Seballot'" />
그리고 직접적으로 표준 그리고표준을 사용하기 위해 직접 사용하는 것.value체크박스와 라디오 버튼에서 작동하도록 하는 이 해킹 코드를 만들었습니다.
// Run this method just before initializing your Vue instance
function initVModels() {
for(let el of document.querySelectorAll('[v-model]')) {
let value = null
switch (el.getAttribute('type')) {
case "checkbox":
value = $(this).prop('checked'); break
case "radio":
let checkedRadio = document.querySelector(`[name="${el.getAttribute('name')}"]:checked`);
value = checkedRadio ? `'${checkedRadio.value}'` : null
break
default:
value = el.value ? el.value : el.getAttribute('value')
if (value) value = `'${value.replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/(')/g, "'")}'` // line breaks and single quote breaks the html syntax, so replacing
break
}
if (value) el.setAttribute(`v-init:${el.getAttribute('v-model')}`, value)
}
}
그러면 간단하게 사용할 수 있습니다.
<!-- Text Input -->
<input v-model="testString" value="Seballot" />
<!-- Select -->
<select v-model="testSelect">
<option value="foo">Foo</option>
<option value="bar" selected>Bar</option>
</select>
<!-- Checkbox -->
<input type="checkbox" v-model="testBoolean" checked />
<!-- Radio Input -->
<input type="radio" id="foo" name="testRadio" value="foo" checked>
<label for="foo">Foo</label>
<input type="radio" id="bar" name="testRadio" value="bat">
<label for="bar">Bar</label>
그리고 데이터는 다음과 같이 초기화됩니다.
testString: "Seballot"
testSelect: "bar"
testBoolean: true
testRadio: "foo"
''」v-model는 입력의 초기 상태를 무시합니다. 이렇게 '어울리다', '어울리다', '어울리다'를 수 요.value,checked ★★★★★★★★★★★★★★★★★」selected모든 폼 요소에서 사용할 수작업이 가능합니다.Vue 인스턴스 데이터는 항상 진실의 소스로 취급됩니다.초기값은 의 JavaScript .data츠미야
언급URL : https://stackoverflow.com/questions/47885443/set-initial-value-to-vue-js-model-which-is-directly-available-in-html
'programing' 카테고리의 다른 글
| vue getter를 사용하여 개체 내부의 값을 찾는 방법은 무엇입니까? (0) | 2022.07.05 |
|---|---|
| 서명된 int와 서명되지 않은 int의 차이점은 무엇입니까? (0) | 2022.07.05 |
| Java에서 sha256으로 문자열을 해시하려면 어떻게 해야 합니까? (0) | 2022.07.05 |
| 어떻게 공짜가 얼마를 공짜로 주는지 알 수 있죠? (0) | 2022.07.05 |
| @인터페이스의 메서드 구현을 덮어쓸까요? (0) | 2022.07.05 |