Question

当我将我的脚本代码放在js中的单独文件中时，我的组件无法工作，只有当我直接在视图中编写代码时。有什么建议为什么会发生这种情况？

<div id="app">
  <div class="container-fluid">

    <ul class="list-group">
      <post v-for="comment in comments" :post="comment"></post>
    </ul>

    <div id="comment-box">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" @keyup.enter="postComment">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" @click="postComment">Submit</button>
          </span>
      </div>
    </div>

  </div>

</div>

<template id="post-template">
  <li class="list-group-item">
    <i class="glyphicon glyphicon-chevron-up" @click="upvote" :class="{disabled: upvoted}"></i>
    <span class="label label-primary">@{{ votes }}</span>
    <i class="glyphicon glyphicon-chevron-down" @click="downvote" :class="{disabled: downvoted}"></i>
    <a>@{{ post.title }}</a>
  </li>
</template>

Answer 1

如果您的HTML与JS代码位于不同的文件中，则必须在您的vue实例中要求，如解释here：

<强> component.js

module.export = {
template: require('./templates/template.html'),
data: function(){
    return {
    text: "Hello World!"
    };
}
};

<强> template.html

<h1>{{ text }}<h1>

当它在单独的文件中时，Vue.js无法正常工作？

1 个答案: