主页 / 问题 / 927179
Accepted
Tasty Script
Asked:2020-12-31 03:11:34 +0000 UTC2020-12-31 03:11:34 +0000 UTC

如何根据服务器响应加载组件？

  • 772

什么是可用的：

  1. vue文件（当然这里有问题，请帮忙。）

    <template >
  <div class="app" >
     {{dataArticle}} //подгружаем сюда сгенерированые данные
  </div>
</template>
<script>
import LoadFunctions from '@/services/LoadFunctions'
export default {
  name: 'settings',
  data () {
    return {
      dataArticle:  '' 
    }
  },
  mounted () {
    this.getArticle('10') // хочу получить статью номер 10
  },
  methods: {
    async getArticle (data) { // выполняем функцию из mounted
      const response = await LoadFunctions.getArticle(data) // отправляем запрос 
      this.dataArticle = response.data // получаем данные
    }
  }
}
</script>

  2. 向服务器发送数据（文件/services/LoadFunctions）

    export default {
  getArticle (data) {
    return Api().post('getArticle', data)
  }
}

  3. 服务器处理请求，转向 mongodb 寻找所需的文章。返回这样的

    data: {
  used_component:  'article_with_video',
  component_data: {
    header: 'Заголовок',
    text: 'Текст статьи',
    video_url: 'http ссылка' 
  } 
}

在这里我有问题

我在响应中定义了 json ，但是如何used_component通过传递来加载这个特定的component_data呢？

vue.js

1 个回答

  1. Best Answer

    为此，您需要创建一个包装器组件，其中将注册使用内置组件的模板。

    <template>
  <main class="main">
    <component :is="used_component" :data="component_data"></component>
  </main>
</template>

<script>
import AwesomeComponent from "../AwesomeComponent";
import AnotherAwesomeComponent from '../AnotherAwesomeComponent'

export default {
  name: "Main",
  components: {
    AnotherAwesomeComponent ,
    AwesomeComponent ,
  },
data() {
    return {
      used_component: '',
      component_data: {},
    };
  },
created() {
 sendRequestToServer().then(response => {
    this.component_data = response.component_data;
    //в поле used_component должно приходить название компонента
    this.used_component = response.used_component;
    })
  }
};
</script>

    https://ru.vuejs.org/v2/api/#component

    • 7

相关问题