v-show가 소품 작업을 하지 않음

v-show가 소품 작업을 하지 않음

소품을 이용해서 단추를 숨기거나 보여주려고 합니다.

여기 코드가 있습니다.

표시(블레이드)

<product-form-component savebutton="false" updatebutton="false"></product-form-component>

컴포넌트 템플릿

<template>
    <div class="form-actions text-right col-md-12">
                <button v-show="showsavebutton" class="btn btn-primary">Save</button>
                <button v-show="updatemode && showupdatebutton" class="btn btn- primary">Update</button>
    </div>
</template>

자바스크립트

export default {
        props: ['showupdatebutton', 'showsavebutton', 'modalid']
}

두 가지 포인트:

• 그props당신이 지나가고 있다고 그들이 생각하는 방식으로 일하지 마세요.
• 컴포넌트에 데이터 변수(또는 소품)를 작성하려면 에서 사용하는 이름을 사용해야 합니다.v-show.

패싱 소품

다음과 같은 경우:

<product-form-component savebutton="false" updatebutton="false"></product-form-component>

컴포넌트 내에서savebutton그리고.updatebutton속성은 문자열이 됩니다.위의 예에서는 부울이 아닙니다.false, 그것들은 문자열이 됩니다."false".

다른 값에 바인드하려면v-bind:propname또는 그 줄임말:propname:

<product-form-component :savebutton="false" :updatebutton="false"></product-form-component>

이렇게 하면 컴포넌트 내에서 이러한 속성들이 실제로 가치를 갖게 됩니다.false.

컴포넌트 내부 변수 및v-show

에서 사용하는 변수v-shows:

<button v-show="showsavebutton" ...
<button v-show="updatemode && showupdatebutton" ...

컴포넌트에 존재하지 않습니다.컴포넌트에 데이터 변수(또는 소품)를 작성하려면 에서 사용하는 이름을 사용해야 합니다.v-show.

네가 이미 가지고 있는 걸 생각하면props선언되었습니다.다음은 이러한 선언의 예를 제시하겠습니다.v-show의 변수data()사용방법props초기값으로:

Vue.component('product-form-component', {
  template: "#pfc",
  props: ['updatebutton', 'savebutton', 'modalid'],
  data() {
    return {
      updatemode: this.updatebutton,         // initialized using props
      showupdatebutton: this.updatebutton,
      showsavebutton: this.savebutton
    }
  }
})
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<script src="https://unpkg.com/vue"></script>

<template id="pfc">
  <div class="form-actions text-right col-md-12">
    <button v-show="showsavebutton" class="btn btn-primary">Save</button>
    <button v-show="updatemode && showupdatebutton" class="btn btn- primary">Update</button>
  </div>
</template>

<div id="app">
  <p>{{ message }}</p>
  <product-form-component :savebutton="true" :updatebutton="true"></product-form-component>
</div>

바인드 구문을 사용하여 자식에게 전달되는 소품:추가하지 않은 경우:

시험:

<product-form-component :savebutton="false" :updatebutton="false"></product-form-component>

언급URL : https://stackoverflow.com/questions/49459457/v-show-not-working-with-props