v-for - Unable to Display Result in <option> Tag

Bump

Try putting the v-for in a template tag instead.

<template v-for="server in servers">
    <option value="@{{ server.id }}">
        @{{ server.server_name }}
    </option>
</template>

v-for should be fine on <options> here's an example: http://codepen.io/anon/pen/vXyLLL?editors=1111

I've used this one and it worked, make sure its not empty

in div with ID= app

 <select>
  <option v-for="item in items" value="{{ item.code }}">{{ item.name }}</option>
</select> 

JS code

new Vue({
el: '#app',
data: {
    items: [ 
        { name : 'stylo', code : '001', visible : false, hiddenText : 'Iam product One'},
        { name : 'papier', code : '003', visible : true, hiddenText : 'Iam product two'},
        { name : 'cleaner', code : '004', visible : true, hiddenText : 'Iam product three'},
    ]
})

@jaydeluca @alenabdula

I tried both of your method. None of them work. :(

@InaniELHoussain

But the problem is, all my data is fetching from database.

Which is unable to predefined.

@Tyris your <option...> code looks ok, so start by having a look at the data you are actually receiving from the API; it is possible that the structure is slightly different from what you are expecting. Vue will dump errors and warnings into the console if you use the unminified version and set the debug level.

Vue.config.debug = true

@tykus_ikus

I tried to implement Vue.config.debug = true and it seems my servers variable is fine.

I can view the information by using console.log but when it is unable to v-for server list.

Can you show us complete code, including result of console.log()?

Also install VueJS devtools to help you https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=chrome-app-launcher-info-dialog

Looking at this this.$set('servers', response.data.server); I believe it should be this.$set('servers', response.data);

@Tyris are you calling the getWebsiteItems method from the ready function to load the data that will be shown

new Vue({

el: '#app',
ready: function(){
    this.getWebsiteItems()
},
methods: {
    getWebsiteItems: function() {
        http.get('/websites').then((response) => {
            this.$set('servers', response.data.server);
        });
    }       

}
})

@InaniELHoussain, yes. What you are doing is almost exactly the same as what I had done.

new Vue({
    el: '#website-listing',
    data: {
        ...
    },
    ready: function() {
        this.getWebsiteItems();
    },
    methods: {
        getWebsiteItems: function() {
            this.$http.get('/websites').then((response) => {
                this.$set('servers', response.data.servers);
                this.$set('websites', response.data.websites);
            });
        }
    }
});

@alenabdula ,

This is the result when I console.log(response.data.servers)`

[Object, Object]
0:Object
1:Object

@Tyris try this way it should work

new Vue({

el: '#app',
ready: function(){
    this.getWebsiteItems()
},
methods: {
    getWebsiteItems: function() {
        http.get('/websites').then((response) => {
            this.$set('servers', response.data);
     });
 }       

}
})

@InaniELHoussain ,

Still no luck to list out all the server.

It shows empty option.

I guess I have to use Laravel foreach loop to display it.

Any way you could post what GET /websites returns (what you get in Network panel)?

And how about having a default value for servers in data:

data: {
  servers: []
}

and call this.servers = response.data.servers, does that change anything?

Last question, is your directly in #app or in a component?

@JoolsMcFly ,

Hi JoolsMcFly,

Sorry I could not give you any data that come from Network Panel.

I never assign any default value for server in data. I just leave it blank. *Of course, I tried to assign the value into server in data but the v-for is not working either.

The method you shows this.servers = response.data.servers I had also tried. It still the same. no luck.

But it manages to display the correct value when I am using @{{ servers[0].server_name }}

Last question, is your directly in #app or in a component?

It is inside #app.

I have really no idea why this is not working.

Everything seems fine, is that mean I have to maually key in the value into the server by myself?

data" {
    server: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
    ]
}

@Tyris still not solved yet? could you show us the whole code (both View and JS part)

@InaniELHoussain,

I updated my code already.

Please let me know if you are looking for other codes also.

Thank you very much. Much appreciated for your help.

I can share my source file to you if you want to.

What's this?

data" {
    server: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
    ]
}

The syntax is wrong. It should be this.

data: function() {
    return {
        servers: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' }
        ]
    }
}

Your data key was also "server" and not "servers"

Also install Vue-Devtools - it will save you a tonne of time debugging.

https://github.com/vuejs/vue-devtools

@JoeDawson ,

It's just an example. Don't too serious about it.

My actual coding was posted at the first post.

@tyris then how do you expect people to help you debug lol? paste your code :D

It's not working for multiple reasons:

1. You are trying to loop over a property (servers) in your data object that you haven't initialized which means no watcher is created for that value so even if you add it later the loop won't work. It should look like the code below:

data: {
        newWebsiteItems: {
            website : '',
            duration : 0,
            purchased_date : '',
            server: ''
        },
    servers: []
},

1. Your api call doesn't actually set the servers in the data object:

this.$http.get('/websites').then((response) => {
                this.$set('options', response.data.servers); // <-- you are setting an 'options' property with the server data, not 'servers'
                this.$set('websites', response.data.websites);
            });

@JoeDawson

I told you my code was paste on the #1 post. =.=

@tjames

I tried to defined servers inside data previously, it still not working.

I also replace the options to servers

<option> won't loop but if you use servers[0].server_name then it will come out with the correct data.

Firstly, your template is correct (v-for etc). Here's a working example of using v-for in a select.

https://jsfiddle.net/mc6a8L4L/

So the issue isn't with Vue here, not at least to my understanding of everything so far.

I believe the issue is related to how your fetching the servers. How're you currently returning the servers and websites on your /websites endpoint?

Vue-Resource will return any response in a data object. But Laravel also returns it's responses in a data object.

Where you currently have this:

this.$set('servers', response.data.servers);
this.$set('websites', response.data.websites);

Have you tried this?

this.$set('servers', response.data.servers.data);
this.$set('websites', response.data.websites.data);

I guess you are looking for vue-async-data https://github.com/vuejs/vue-async-data ?

or if you are using vue-router

route: {
    data: function (transition) {
            // return your $http request 
           },
}