Vue内联模板无法调用方法/读取数据问题求助

结合你的代码和使用场景，我梳理了几个大概率的问题点和对应的解决办法：

1. 生命周期钩子使用错误（最直接的原因） #

你在组件里写的ready()是Vue 1.x的旧语法，Vue 2.x已经移除了这个钩子，替换成mounted()了！大概率是你在Laravel环境里用对了钩子，但这里写错导致代码没执行。把ready()改成mounted()试试：

export default {
  data() {
    return {
      activeTab: null
    }
  },
  methods: {
    changeTab(id) {
      this.activeTab = id;
    }
  },
  mounted() { // 替换原来的ready钩子
    console.log('foo');
    console.log('组件已成功挂载！');
  }
}

2. 脚本加载时机不对，DOM未渲染就注册组件 #

WordPress默认可能把你的脚本加载在<head>标签里，这时候页面上的<tabbed-panels>还没被浏览器解析，Vue找不到对应的DOM节点来挂载组件。可以通过两种方式解决：

• 借助WordPress的wp_enqueue_script函数，设置$in_footer = true，把脚本放在</body>标签之前加载
• 或者等待DOM完全加载后再初始化Vue和组件：

document.addEventListener('DOMContentLoaded', function() {
  Vue.component('tabbed-panels', require('./tabbed-panels.js'));
  // 确保Vue实例的挂载元素包含你的tabbed-panels组件
  new Vue({
    el: '#your-root-element'
  });
});

3. 确保Vue实例覆盖了内联模板的DOM范围 #

你必须有一个Vue根实例，并且它的挂载元素（比如el: '#app'）是<tabbed-panels>的父元素，否则Vue不会处理这个组件。如果之前没显式创建根实例，一定要补上，Vue需要根实例来管理所有子组件。

4. 规避WordPress的HTML解析干扰 #

有时候WordPress会自动给HTML添加额外标签或转义字符，导致Vue无法正确解析内联模板。可以改用<script type="text/x-template">的方式定义模板，比inline-template更可靠：

<script type="text/x-template" id="tabbed-panels-tpl">
  <div>
    <div class="tabPanels__controls-control" v-on:click="changeTab(1)"></div>
  </div>
</script>
<tabbed-panels class="component tabPanels"></tabbed-panels>

然后修改组件代码，引用这个模板：

export default {
  template: '#tabbed-panels-tpl',
  // 其他data、methods、mounted代码不变
}

先从替换生命周期钩子开始排查，再检查脚本加载时机和Vue实例范围，应该就能解决问题了！

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