Как получить доступ к свойству данных компонента vue

Question

Я новичок в Vue.js и думаю, что это потрясающе.Мне было поручено начать реализацию некоторых vue-компонентов в нашем веб-приложении, не относящемся к новым технологиям, и я подумал, что начну с реализации некоторых автономных «виджетов», которые должны иметь дело с состоянием в приложении rails моей работы.

Он прекрасно работает как автономный компонент, но я хочу загрузить его с атрибутом данных, чтобы компонент знал, с чем ему нужно иметь дело.Мой файл Vue выглядит так (я отредактировал части этого из-за проблем с IP):

<template>
    <div class="card">
         <div class="card-body">
            ${{ b.id }}
        </div>
        <div class="card-footer bg--blue-sky">
            ${{ b.amount }}
        </div>
    </div>
</template>

<script>
  export default {
    data: function () {
      return {
        errors: [],
        b: {
          id: null,
          amount: null
        }
      }
    },

    // Fetches posts when the component is created.
    created: function () {
      jQuery.ajax({
        url: "/api/b/" + '2' + ".json",
        method: 'GET',
        dataType: "json"
      })
          .then(response => {
            this.b = response.b
          })
          .catch(e => {
            this.errors.push(e)
          });
    }
  }
</script>

<style scoped>

</style>

Компонент зарегистрирован с:

import FiDis from '../components/fi_dis.vue'
Vue.component('fi_dis', FiDis);
document.addEventListener('turbolinks:load', () => {
  const fi_dis = new Vue({
    el: '#bs',
    components: { FiDis }
  })
});

И в моем коде html.erb яСоздайте компоненты с помощью:

<div id="bs" policy="2">
    <fi_dis data-b-id="1"></fi_dis>
    <fi_dis data-b-id="2"></fi_dis>
</div>

Все это работает безупречно и выполняет именно то, что я хочу, за исключением одной вещи.Я хочу получить доступ к атрибуту data-b-id в созданной функции компонента (т.е. заменить число '2' в URL-адресе вызова ajax выше на значение из атрибута).Таким образом, я надеюсь, что компонент будет обрабатывать ЛЮБОЙ «fi_dis», который я выберу, просто указав b-id в атрибуте данных, который я хочу обработать.

Как мне этого достичь?

Answer 1

Вы передаете значения данных, передавая реквизит от родительского компонента к дочерним компонентам.

Так, например, вы должны определить, какие реквизиты разрешено получать вашему компоненту:

import FiDis from '../components/fi_dis.vue'
Vue.component('fi_dis', FiDis);
document.addEventListener('turbolinks:load', () => {
  const fi_dis = new Vue({
    el: '#bs',
    components: { FiDis },
    props['bId'],
    created() { // This is a lifecycle method
        this.printPropertyValue();
    },
    methods: {
        // Your custom methods goes here separeted by commas
        printPropertyValue() {
            console.log(this.bId);
        }
    }
  })
});

И синтаксис для передачи данных из реализации компонента использует v-bind:propertyName или :propertyName (сокращение).

<div id="bs" policy="2">
    <fi_dis :bId="1"></fi_dis>
    <fi_dis :bId="2"></fi_dis>
</div>