Vue中用laracasts/utilities传Laravel变量出现[object HTMLTextAreaElement]怎么办？

嘿，我太懂这个坑了！你看到的[object HTMLTextAreaElement]根本不是我们要的文本内容，问题出在浏览器的默认行为和变量名冲突上。

问题根源 #

浏览器有个“贴心”但容易踩坑的机制：它会把页面中带有id属性的DOM元素自动挂载到window对象上，而且这个挂载的优先级比我们通过laracasts/utilities注入的变量更高。如果你的textarea的id或者name正好是description，那window.description就会被这个DOM元素覆盖，你在Vue里拿到的自然就是textarea元素对象，而不是我们要的房间描述文本。

解决方案（任选其一就行） #

方案1：修改注入的变量名

最简单直接的办法，给变量换个不冲突的名字：
控制器代码改成：

JavaScript::put([ 'roomDescription' => $room->description ]);

对应的Vue代码更新：

var keywordcount = new Vue({
  el: "#desc-edit",
  data: {
    maxdesc: 160,
    desc: window.roomDescription
  },
  computed: {
    descEdit: function() {
      return this.maxdesc - this.desc.length;
    }
  }
});

方案2：修改textarea的id/name

如果不想改变量名，就把你的textarea的id和name改成别的，比如：

<textarea id="desc-textarea" name="desc-textarea"></textarea>

这样浏览器就不会把它挂载到window.description上，你原来的Vue代码就能正常拿到注入的文本变量了。

方案3：使用默认命名空间（可选）

如果你没强制设置js_namespace为window，默认的命名空间是Laravel，你也可以直接用Laravel.description来获取变量，这样就不会和DOM元素冲突：

desc: Laravel.description

不过既然你已经配置成window了，前两个方案更贴合你的现有配置。

内容的提问来源于stack exchange，提问作者psudo