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

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

<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 имеет слишком много полей, чтобы передавать каждое поле отдельно.


javascript vue.js vue-props
person arkuuu    schedule 27.02.2020    source источник
comment
MyComponent собран вами или взят из других библиотек?   -  person Shahadat Hossain    schedule 27.02.2020
comment
Он построен мной. И я думаю, что нашел решение сейчас, спасибо!   -  person arkuuu    schedule 27.02.2020

Ответы (2)


arrow_upward
1
arrow_downward

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

<script>
export default {
  name: 'MyComponent',
  props: {
    blueprint: {
      type: Object
    }
  },
  data () {
    return {
      blueprintDefault: {
          attribute: 0,
          otherAttribute: 5 
      }
    }
  },
  mounted () {
   this.blueprint = {...this.blueprintDefault, ...this.blueprint}
  }
}
</script>
person Shahadat Hossain    schedule 27.02.2020

arrow_upward
0
arrow_downward

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

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

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

person arkuuu    schedule 27.02.2020