Как передать и получить атрибут данных внутри vue компонентов - PullRequest
Новая
       66

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

1 голос
/ 22 апреля 2020

Я новичок в vue, но я учусь использовать его без веб-пакета. У меня есть необходимость использовать некоторые компоненты, вложенные в основной компонент, который будет отображать домашнюю страницу моей пользовательской темы WordPress. Компоненты, которые я хочу вложить, должны передать атрибут данных в вызов ajax, который будет извлекать соответствующие данные для отображения, я установлю их вручную для каждого экземпляра, который мне нужно использовать. Как я могу это сделать?

Это код компонента 

Vue.component('theme-section',{
  template: '#section-tpl',
  data(){
    return{
      sectionData: []
    }
  },
  mounted: function(){
    this.getSection();
  },
  methods: {
    getSection: function(){
      axios.get(theme.base_url+'theme/v1/sections?slug='+ )
        .then( (response) => {
        console.log(response.data);
        response.data.forEach( (item, i) => {
          this.sectionData = [item];
        });
      });
    }
  }
});

Это разметка компонента. Я загружаю его, используя get_template_part() функцию wordpress в нижнем колонтитуле темы, куда также загружаются все остальные компоненты разметки. Я назову это внутри домашнего компонента, который я определил 

<script type="text/x-template" id="section-tpl">
<div class="container-fluid p-0">
  <div class="row m-0" v-for="section in sectionData" :data-section="" >
    <div class="col-sm-12 col-md-12 col-lg-12 p-0">
      <!-- <a class="h4 mt-5" href=""></a> -->
      <div class="col-sm-12 col-md-6 col-lg-6 p-4">
        <h1 class=" font-weight-bold mt-3 mb-3"></h1>
        <h4 class="mt-3 mb-3"></h4>
      </div>
    </div>
  </div>
</div>
</script>

// this is the home component markup where the other component will be reused
<script type="text/x-template" id="home-tpl">
  <div class="container-fluid p-0">
    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-12 col-lg-12 p-0" v-if="page._embedded['wp:featuredmedia'][0].source_url">
        <img class="img-fluid w-100" :src="page._embedded['wp:featuredmedia'][0].source_url">
      </div>
      <div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5">
        <h1>{{ page.title.rendered }}</h1>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5" v-html="page.content.rendered"></div>   
    </div>
    <theme-section data-section="about"></theme-section>
  </div> <!-- end container-fluid -->
</script>
...