vue свойство как имя реквизита без значения - PullRequest
Новая
       13

vue свойство как имя реквизита без значения

1 голос
/ 10 июля 2019

Я хочу передать свойство, которое не имеет никакого значения - только имя.Я хочу, чтобы имя было динамическим в соответствии с подпоркой.

Я хочу создать компонент подсказки, который получает сторону подсказки -> вверху слева, справа или внизу.в v-tooltip нет свойства side , все side - это другое свойство без значения.Я хочу изменить его в соответствии с реквизитом (сторона - это переменная - реквизит моего компонента). 

<template>
  <v-tooltip side>            
    <template slot="activator">
      <slot slot="activator"></slot>
    </template>   
    <span>{{text}}</span>      
  </v-tooltip>
</template>
<script>
  export default {
    props: {
      text: {
        type: String,
        required: true,
      },
      side: {
        default: 'top',
      },
    },
  }
</script>

Я не могу найти способ использовать реквизит в качестве имени свойства

1 Ответ

1 голос
/ 10 июля 2019

Есть две вещи, которые вам нужно осознать. В Vue вызов компонента с <my-component has-this-prop /> это то же самое, что вызов компонента с <my-component :has-this-prop="true" />. Логическое значение в основном переключает опору.

Вы также можете динамически изменять, какие реквизиты связаны с компонентом, используя синтаксис v-bind без имени реквизита, как указано в документации .

Это означает, что если в родительском компоненте есть реквизит side, который всегда содержит правильную сторону, вы можете создать вычисляемое свойство, содержащее все реквизиты, которые вы хотите передать, а затем использовать v-bind на вашем v-tooltip для передачи реквизита: 

<template>
  <v-tooltip v-bind="tooltipProps">
    <!-- Something -->
  </v-tooltip>
</template>

<script>
const validSides = [
  'top',
  'top left',
  'top center',
  'top right',
  // you get the idea
];

export default {
  props: {
    side: {
      type: String,
      default: 'top',
      validator(prop) {
        return validSides.contains(prop);
      }
    }
  },

  computed: {
    tooltipProps() {
      if (!validSides.contains(this.side)) {
        return {};
      }

      const propsNames = this.side.split(' ');
      const props = {};
      for (const propName of propsNames) {
        props[propName] = true;
      }

      return props;
    }
  }
}
</script>
...