David J. David J. - 1 year ago 105
HTML Question

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

This js-fiddle example is working as it should:


But when I try to load this example on my own, the dropdown menu doesn't show anything -- even though it does in the js-fiddle example (try entering "wireless" in the input box.)

This is my html:

<!DOCTYPE html>
<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>

<div id="app">

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

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

And here is the 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(',');

for (var i = 0; i < tagList.length; 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]];
} catch (e) {
return true

Any ideas as to what could be the problem?

Here's what the console prints out in the offline version - it's the same as the online version:

Array [ "wireless" ]
Object { bandwidth: "bit/s, Mb/s, Gb/s", distance: "kilometers, miles", 1 moreā€¦ }

So, apparently the dictionary is being updated as I expect.

Answer Source

The Problem is the Version of Vue JS you are using. the one you mentioned here is different and the one you are using in jsfiddle is different.

Please remove the one u mentioned here and add the following.

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

It will work fine.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download