示例适用于 js-fiddle 但不适用于自制页面答案

【问题标题】：example works in js-fiddle but not in self-made page示例适用于 js-fiddle 但不适用于自制页面
【发布时间】：2016-11-03 10:55:09
【问题描述】：

这个 js-fiddle 示例正在正常工作：

https://jsfiddle.net/qf089a0a/51/

但当我尝试自行加载此示例时，下拉菜单不显示任何内容——即使在 js-fiddle 示例中显示（尝试在输入框中输入“无线”。）

这是我的html：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  </head>
  <body>
    <div id="app">

      <input v-model="offer.tags"></input>
      <select>
        <option v-for="(key, value) in offer.units" v-bind:value="offer.units">
          {{ key }}
        </option>
      </select>
    </div>
  </body>

        <script src="./js/app.js"></script>
</html>

这里是js：

var protocol = {
  "wireless": {
    "units": {
      "bandwidth": "bit/s, Mb/s, Gb/s",
      "distance": "kilometers, miles"
    },
    "children": [],
  }

};

var vm = new Vue({
  el: '#app',
  data: {
    offer: {
      tags: '',
      units: {}
    },
    protocol: protocol
  },
  watch: {
    'offer.tags': {
      handler: function() {
        var tagList = this.offer.tags.split(',');
        console.log(tagList);

        for (var i = 0; i < tagList.length; i++) {
          console.log(tagList[i]);
          try {
            var unitsObj = this.protocol[tagList[i]]["units"];
            var unitKeys = Object.keys(unitsObj);

            for (var i = 0; i < unitKeys.length; i++) {

              if (!unitsObj[unitKeys[i]]) {
                console.log("updating units");
                // update dict only if it doesn't already contain key
                this.offer.units[unitKeys[i]] = unitsObj[unitKeys[i]];
              }

              this.offer.units[unitKeys[i]] = unitsObj[unitKeys[i]];
            }
            console.log(this.offer.units);
          } catch (e) {
            return true
          }
        }
      }
    }
  }
});

关于可能是什么问题的任何想法？

以下是控制台在离线版本中打印的内容 - 与在线版本相同：

    Array [ "wireless" ]
app.js:27:9
    wireless
app.js:30:11
    Object { bandwidth: "bit/s, Mb/s, Gb/s", distance: "kilometers, miles", 1 more… }

所以，显然字典正在按我的预期进行更新。

【问题讨论】：

提示：输入不需要关闭。您的离线版本是否包含相同的内容？
您的本地系统发生了什么，您是否看到任何错误？您可以在内部 for 循环中更改变量 i 一次，但这应该不是问题。
@thatOneGuy 谢谢，我会记住的。是的，我有相同的包含。
@saurabh 我的本地系统上没有错误。我将在我的问题中包含一个控制台打印输出...

标签： javascript html vue.js jsfiddle

【解决方案1】：

问题是您使用的 Vue JS 版本。你这里提到的不一样，你在 jsfiddle 中使用的不一样。

请删除您在此处提到的那个并添加以下内容。

<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>

它会正常工作的。

【讨论】：

非常感谢，很棒的收获！