Блог

Главная - Вопросы по программированию - Vue: динамический «v-слот = { значение }» приводит к скрытию div

Vue: динамический «v-слот = { значение }» приводит к скрытию div

#javascript #html #vue.js #vuejs2 #vue-component

Вопрос:

В Родителя я включил один дочерний компонент как таковой:

 <template>
 <div>
  <ChildComponent :value="var1" v-slot="{value}">
   <input v-model="value.name"/>
  </ChildComponent>
 </div>
</template>

<script>
import ChildComponent from "../components/ChildComponent.vue";
export default {
 components: { ChildComponent },
 data() {
  return {
   var1: {
    name: "Vue.js",
    message: "LocalHost"
   }
  };
 }
</script>

Дочерний компонент:

 <template>
 <div>
  <div id="divToShow" v-if="this.$slots.default || this.$scopedSlots.value">
   <slot/>
  </div>
  <div v-else id="divFallback">
   <p>Nothing in your input component!</p>
  </div>
 </div>
</template>

<script>
 export default {
 name: "ChildComponent",
  props: {
   value: String
  }
 }
</script>

Однако divToShow не появляется, поэтому divFallback занимает свое место. Как я должен делать divToShow показ, когда родитель определяет (казалось бы) динамический слот имени, подобный этому?

Комментарии:

1. scopedSlots использует функции для доступа к VNode с первым аргументом для передачи реквизитов. vuejs.org/v2/api/#vm-scopedSlots , попробуй this.$scopedSlots.value()

2. Не используйте this в шаблонах

3. замена v-if="this.$slots.default || this.$scopedSlots.value" на v-if="$scopedSlots" , похоже, решила мою проблему, но я думаю, это потому, что я использовал только один слот с областью действия или потому, что я определил слот с областью действия, чтобы значение не было неопределенным/нулевым.

Метки: