VueJ는 프로포트를 데이터 속성 가치로 사용
저는 다음과 같은 시나리오에 매우 어려움을 겪고 있습니다.
일부 인덱스 페이지:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="app">
<ul>
<li>some existing option</li>
<example-component :foo="foo" :bar="bar"/>
</ul>
<a @click.prevent="showDetail(1, 'abc')" href="#" >Click ME!</a>
</div>
<script src="app.js"></script>
</body>
</html>
일부 단일 파일 구성 요소:
<template>
<li><a v-show="checkBool" data-toggle="tab" class="some-class" href="#container-div" data-tab-url="{{ this.foo }}">{{ this.bar }}</a></li>
</template>
<script>
export default {
props: ['foo', 'bar'],
computed: {
checkBool: function() {
return (this.foo != undefined && this.bar != undefined )
}
}
}
</script>
그리고 그app.js다음과 같습니다.
import Vue from 'vue'
Vue.component('example-component', require('ExampleComponent.vue'));
const app = new Vue({
el: '#app',
props: [
'foo',
'bar'
],
data: {
foo: '',
bar: ''
},
methods: {
showDetail: function (foo, bar) {
this.foo = foo,
this.bar = bar
}
}
});
라라벨 설치로 웹팩과 함께 바벨을 사용하고 있습니다.
시나리오는 다음과 같습니다.
- 를 클릭하면
Click ME!링크,foo그리고.bar갱신되어 컴포넌트에 전달됩니다(이 부분은 동작하고 있습니다). - 명명된 계산된 속성
checkBool이 예가 참이 되기 때문에 새로운 리스트 아이템이 표시됩니다(이 부분은 동작하고 있습니다). - 새 목록 항목, 텍스트가 올바르게 설정된 링크가 있습니다.
bar(이 부분도 동작하고 있습니다)
이 시점에서 컴포넌트와 부모 간의 값 설정 및 통신은 정상적으로 동작하고 있는 것을 알 수 있습니다.data-tab-url="{{ this.foo }}"파트가 날 미치게 해
예상대로 콧수염 구문을 구문 분석하여 반환하는 대신data-tab-url="1"따옴표 사이에 있는 모든 것의 구문 분석/에스케이프 값을 가져옵니다.
뭐랄까data-tab-url="%7B%7B+this.foo+%7D%7D".
부호화를 방지하려면 어떻게 해야 하나요?내가 읽은 바로는, 옛날엔...vuejs 1.*. 3개의 브래킷 사용:{{{ this.foo }}}하지만 지금은 더 이상 추천되지 않는다v-html제 예로는 사용할 수 없습니다.
속성을 다음과 같이 바인딩합니다.:data-tab-url="foo".
이렇게 하면 영향을 받는 요소가data-tab-url같은 값을 가진 속성foo컴포넌트의 속성.
고맙다는 대답은 맞지만;
자세한 것은, 다음과 같습니다.
속성 바인딩에는 콧수염 구문을 사용할 수 없습니다.콧수염 {{}}: 돔 요소의 내용만 사용하십시오.
<div>{{someValue}}</div> (THIS IS WRONG)
"src" 또는 "data-tab-url"과 같은 템플릿을 포함한 속성을 바인딩하려면 "v-bind:attr" 또는 ":attr" 단축형을 사용합니다.
<div v-bind:src="someDataVariable"></div>
또는
<div v-bind:some-prop="someMethod()"></div>
구성 요소 또는 Vue 앱의 모든 멤버(데이터, 메서드, 계산 등)를 "이것" 없이 사용할 수 있습니다.
html 내의 컴포넌트 인스턴스 속성(prop, data, computed...)을 렌더링하려면 다음 작업을 수행해야 합니다.
다음을 사용하여 속성에 바인딩
v-bind:또는 줄임말:맘에 들다:foo="someFoo"콧수염 구문 내에서 사용
{{someFoo}}지시값으로 사용
v-show="isShown"또는v-model="username"명령어는 항상 앞에 붙습니다.v-
이벤트의 경우 다음과 같이 표시됩니다.v-on:eventName또는@eventName인라인 스테이트먼트를 실행할 수 있습니다.@click="count++"또는 방법@click="increment"을 알고increment에 정의되어 있는 함수입니다.methods옵션들
언급URL : https://stackoverflow.com/questions/43236848/vuejs-use-prop-as-data-attribute-value
'programing' 카테고리의 다른 글
| C 포인터에서 어레이 크기를 가져오려면 어떻게 해야 합니까? (0) | 2022.08.30 |
|---|---|
| 파일을 압축/해동하기 좋은 Java 라이브러리는 무엇입니까? (0) | 2022.08.30 |
| Vue.js vue-router:페이지를 새로고침하지 않고 되돌아가려면 어떻게 해야 합니까? (0) | 2022.08.29 |
| ISO C90은 C에서 선언과 코드가 혼재하는 것을 금지합니다. (0) | 2022.08.29 |
| vue.js cli 명령어 "npm run serve" 작동 방식 (0) | 2022.08.29 |