반응형
VueJs 콧수염 데이터 바인딩이 작동하지 않습니다.디버깅하려면 어떻게 해야 하나요?
VueJs의 콧수염이 있는 HTML 태그 내에서 VueJs 데이터 문자열을 렌더링하려고 합니다.그러나 문자열은 렌더링되지 않습니다.VueJS dev-tools 내에서 관찰된 대로 변수 값이 채워집니다.무엇이 잘못되었음에 틀림없는지를 판단하는데 어떤 도움이라도 주시면 감사하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Doc Scan</title>
<!--Bulma CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" />
<!-- Vue JS Production-->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<!-- Vue JS Dev-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 class="title is-1">Doc Scanner</h1>
<div class="file has-name">
<label class="file-label">
<input class="file-input" type="file" ref="file" v-on:change="handleFileUpload()">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name" v-if="file">
File is there : {{ filename }}
</span>
<span class="file-name" v-else>
No file selected
</span>
</label>
</div>
</div>
<!--VueJS Script-->
<script>
var app = new Vue({
el: '#app',
data: {
file: '',
filename: '',
},
methods: {
handleFileUpload() {
this.file = this.$refs.file.files[0];
this.filename = this.file.name;
console.log(this.filename)
}
}
})
</script>
</body>
</html>VueJS 딜리미터가 Python의 딜리미터와 충돌하고 있는 것 같습니다.이 투고에 따라 딜리미터를 다시 정의하면 문제가 해결되었습니다.stackoverflow.com/questions/45203736/ .협조해 주셔서 감사합니다.
프로젝트를 쉽게 셋업하고 vuej의 모든 가능성을 사용하려면 vue-cli를 사용해야 합니다.
그러면 데이터는 객체를 반환하는 함수여야 합니다.
https://vuejs.org/v2/guide/components.html 의 메뉴얼을 참조하십시오.
var app = new Vue({
el: '#app',
data: function() {
return {
file: '',
filename: '',
}
},
methods: {
handleFileUpload() {
this.file = this.$refs.file.files[0];
this.filename = this.file.name;
console.log(this.filename)
}
}
})
언급URL : https://stackoverflow.com/questions/59340170/vuejs-mustache-data-binding-not-working-how-can-i-debug-this
반응형
'programing' 카테고리의 다른 글
| C++의 제한은 C언어와 비교했을 때 어떻게 됩니까? (0) | 2022.09.05 |
|---|---|
| PHP의 특성 내에서 클래스 생성자를 오버로드하는 방법 >= 5.4 (0) | 2022.09.05 |
| 옵션을 사용하여 명령줄에서 .sql 파일을 내보내고 가져오려면 어떻게 해야 합니까? (0) | 2022.09.05 |
| UTC 날짜 시간을 로컬 날짜 시간으로 변환 (0) | 2022.09.05 |
| Javascript에서 문자열에 포함된 문자의 발생 횟수를 카운트합니다. (0) | 2022.09.05 |