Question

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

但是当我尝试自己加载这个例子时，下拉菜单并没有显示任何内容 - 即使它在js-fiddle示例中也是如此（尝试输入＆＃34; wireless＆＃34;在输入框。）

这是我的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，但不适用于自制页面

1 个答案: