示例在 js-fiddle 中有效，但在自制页面中无效

Question

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

但是当我尝试自己加载这个示例时，下拉菜单没有显示任何内容——即使它在 js-fiddle 示例中显示（尝试在中输入 "wireless"输入框。)

这是我的 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… }

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

Answer 1

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

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

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

它将正常工作。

示例在 js-fiddle 中有效，但在自制页面中无效

example works in js-fiddle but not in self-made page

html

javascript

jsfiddle

vue.js