使用Laravel Project中的View.js

Question

我试图弄清为什么我的Vue实例的 refs 未定义。

使用Laravel Project中的View.js

在这里您可以看到我发起了Vue实例

（资源\资产\ js \ app.js）：

import AutoPopulateSelect from './components/results-text/AutoPopulateSelect.vue';

const app = new Vue({
    el: '#app',
    components: { 'auto-populate-select': AutoPopulateSelect }
});

这是我实际使用带有 ref 的组件

的地方

（资源\视图\结果文本\ edit.blade.php）：

<auto-populate-select ref="models">Vehicle Models</auto-populate-select>

我尝试运行app.$refs，但是这只会返回undefined。我已经在控制台中完成了此操作，因此应用程序将完成加载。

编辑：

如果我在定义console.log(app.$refs);的下面运行app，就注意到字符串了，所以：

import AutoPopulateSelect from './components/results-text/AutoPopulateSelect.vue';

const app = new Vue({
    el: '#app',
    components: { 'auto-populate-select': AutoPopulateSelect }
});
console.log(app.$refs);

然后参考就在那里！看来是当我尝试从控制台执行此操作时……Laravel是否做了一些时髦的事情？？

Answer 1

https://vuejs.org/v2/api/index.html#ref

关于裁判注册时间的重要说明：因为裁判本身是通过render函数创建的，您不能在初始渲染中访问它们-它们尚不存在！ $ refs是也是非反应性的，因此您不应该尝试在数据绑定模板。

您在哪里使用mysql> SELECT @other_table := other_table FROM first_table WHERE 1 = 1; mysql> SET @s = CONCAT("SELECT * FROM ", @other_table); mysql> PREPARE stmt FROM @s; mysql> EXECUTE stmt; mysql> DEALLOCATE stmt;？您可以显示完整的代码吗？

对于您的更新代码，我同意Andrius Rimkus的意见。您应该仔细检查正在使用的WHERE 1=1，或者在页面加载后仅在控制台中运行$refs，以查看它是app对象。

而且，由于您使用的是Vue，因此Vue内部的大多数代码都可以只使用console.log(app)而不是app。

Answer 2

我知道这一点为时已晚，但对于遇到同样问题的任何人，

const app必须全局声明，这为我解决了这个问题。

所以应该是：

const window.app = new Vue({
  el: '#app',
  components: {
    'auto-populate-select': AutoPopulateSelect
  }
});

现在console.log(app.$refs);应该显示来自其他js文件或内联函数的所有引用。

Vue.js $ refs是未定义的

使用Laravel Project中的View.js

编辑：

2 个答案: