在 laravel 中，使用我从 ajax 过滤的数据将 VUE 组件“附加”到 DOM 的正确方法是啥？

Posted 2023-02-23

【中文标题】在 laravel 中，使用我从 ajax 过滤的数据将 VUE 组件“附加”到 DOM 的正确方法是啥？

【英文标题】：What is the proper way to "append" VUE component to DOM using my filtered data from ajax, in laravel?在 laravel 中，使用我从 ajax 过滤的数据将 VUE 组件“附加”到 DOM 的正确方法是什么？

【发布时间】：2020-01-07 08:09:19

【问题描述】：

我是新来的，所以希望一切都好。

我正在使用 ajax 构建搜索过滤器，使用适当的控制器过滤我的数据并将结果发送到 ajax。 此时我想“附加”我的 vue 组件并绑定数据结果。

在 google 上搜索这是“错误”的方式，因为 js 和 vue.js 使用不同的方法渲染到 DOM。（对吗？）

我发现正确的方法是将结果数据从 ajax（以某种方式）发送到我的 vue 组件。 在 laravel 中我该怎么做？

app.js：

 Vue.component('template', require('./components/template.vue').default;

const app = new Vue(
 el:'#mytemplate',
);

模板.vue：

  <template>
     <div> title </div>
  </template>

 <script>
    export default
     props:['title'],
    
</script>

我的 ajax：

  success: function(data)
   for(var i = 0; i < 10;i++)
      name = data[i];

    //what i would is 
    // $('#template').empty();
    //$('#template').append('<template title="'+ name +'"></template>');

   

非常感谢您！

【参考方案1】：

在你的 Vue 模板中，对挂载的钩子执行 ajax 请求以获取数据并将其绑定到标题数据对象而不是道具

您可以让 Vue 组件始终存在于 Blade 视图文件中，并在数据加载时有条件地呈现或显示

这样的东西应该可以工作

template.vue

<template>
  <div v-show="shown">
    <div v-for="title in titles" :key="title">
       title 
    </div>
  </div>
</template>

<script>
    export default 
       data() 
         return 
           shown: false,
           titles: [],
         
       ,
        mounted() 
            axios.get('/route').then(response => 
              this.titles = response.data;
              this.shown = true;
            );
        
    
</script>

【讨论】：

你不必等待你的组件被挂载来开始获取数据。相反，一旦您的组件在 'created()' 钩子中创建，就获取您的数据。

@Sackey 会破坏 Ajax 的全部目的，不是吗？那么为什么不直接将 Blade 模板中的数据作为 props 传递给组件呢？