示例在js-fiddle中工作，但在自制页面中不工作

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

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

但是当我尝试自己加载这个例子时，下拉菜单没有显示任何东西——即使它在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… }

所以，显然字典正在更新，正如我所期望的。

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

请删除你在这里提到的，并添加以下内容。

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

相关内容

最新更新

热门标签：