Как передать атрибут объекта как пропеллер компоненту vue. js - PullRequest
Новая
       1

Как передать атрибут объекта как пропеллер компоненту vue. js

1 голос
/ 27 февраля 2020

Учитывая следующий компонент: 

<script>
export default {
  name: 'MyComponent',
  props: {
    blueprint: {
      type: Object,
      default () {
        return {
          attribute: 0,
          otherAttribute: 5
        }
      }
    }
  },
  data () {
    return {
      attribute: this.blueprint.attribute,
      otherAttribute: this.blueprint.otherAttribute
    }
  }
}
</script>

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

Но как мне пройти только одно поле пропеллера blueprint? Когда я сделаю это: 

<my-component :blueprint="{attribute: someVar}" />

otherAttribute по умолчанию blueprint, конечно, исчезнет.

Могу ли я установить только одно поле реквизита и объединить его со значением по умолчанию для другого, например, так: 

<my-component :blueprint.attribute="someVar" />
<!-- It doesn't work like this, but maybe you get the idea what I want -->

К сожалению, в реквизите blueprint слишком много полей, чтобы пропустите каждое поле самостоятельно.

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

да, ваш ответ в порядке. Вот мое решение 

<script>
export default {
  name: 'MyComponent',
  props: {
    blueprint: {
      type: Object
    }
  },
  data () {
    return {
      blueprintDefault: {
          attribute: 0,
          otherAttribute: 5 
      }
    }
  },
  mounted () {
   this.blueprint = {...this.blueprintDefault, ...this.blueprint}
  }
}
</script>
0 голосов
/ 27 февраля 2020

Я нашел решение, которое, кажется, работает для меня. Мой компонент теперь выглядит следующим образом: 

<script>
export default {
  name: 'MyComponent',
  props: {
    blueprint: {
      type: Object
    }
  },
  data () {
    return {
      attribute: this.blueprint.attribute ?? 0,
      otherAttribute: this.blueprint.otherAttribute ?? 5
    }
  }
}
</script>

Я удалил часть default опоры и теперь вместо этого устанавливаю значения по умолчанию непосредственно в данных. Таким образом, если моя blueprint prop не включает все атрибуты, другие значения по умолчанию все равно будут там.

...