Get a certain ID on a edit page

Add v-model to it?

To where?

Just changed HTML to this:

<div id="productOptions">
                    <form method="POST" v-on="submit: onUpdate">

                        <div class="form-group">
                            <label class="col-sm-2">Options</label>

                            <div class="col-sm-2">
                                <div class="input-group">
                                  <input type="text" name="stock" value="@{{ options.stock }}" class="form-control">
                                  <span class="input-group-addon" type="submit"> Update</span>
                                </div>
                                
                            </div>
                        </div>
                    </form>

                </div>

With form tags as there's going to be other data to pass also. But where do I add v-model?

What I do is to save id in temp variable, for example :

edit: function(id, index) {
    this.error.updateContent = null;
    this.temp.id = this.dreams[index].id;
    this.temp.index = index;
    this.updateData.content = this.dreams[index].content;
    $('#myModal').modal();            
},
update: function() {
    this.error.updateContent = null;
    this.resource.update({id: this.temp.id}, this.updateData, function (data) {
        this.dreams[this.temp.index].content = this.updateData.content;
        $('#myModal').modal('hide');
    }).error(function (data) {
        this.error.updateContent = data.content[0];
    });            
}

<input type="hidden" name="product_id" value="{!! $product->id !!}" v-model="product_id">

Yup.. Initialize a data: {'productId'} attribute and then use v-model to bind it to your input tag.

Use the attribute in your function.

So will that v-model now be available in my VueJS file and how would I retrieve that?

Also the preventDefault doesn't seem to be working, it's updating the page from the Laravel side.

Basically my url is admin/products/36/edit so 36 in this example is the ID I need.

Once I have that ID, it brings all the data from the options table from the fetchOptions method, then the onUpdate method I should be able to pass what I like there to then update the options table with the right ID in this instance 36

This is from @RachidLaasri ...

<input type="hidden" name="product_id" value="{!! $product->id !!}" v-model="product_id">

Using v-model binds the value of this input tag to a property in your data object. So, since on page load you set the value of this tag to the product id, you can add a product_id property to your data:

data: {
        options: [
            
        ],
        product_id: Null,
    },

The Null will be replaced through the v-model binding and hence will be 36. Then in your function, get this value by this.product_id

Ah right I see now :)

Can this product_id: Null, be replaced with product_id: '', and still have the same effect?

Up to you.. JS will cast the variable type automatically.

Null is for integers... '' is for strings.

Then in the function I can do this.$http.post('/admin/updateProductOption/' + this.product_id, options); that right?

I'm getting empty

product_id: ""
options: ""

So not even returning the record, I've added + this.product_id to this method:

fetchOptions: function() {
            this.$http.get('/admin/getProductOptions/' + this.product_id, function(options) {
                this.$set('options', options);
                console.log(options);
            });
        },

But not returning anything.

I'm not sure if i can help without checking your console... but try this...

fetchOptions: function() {
        this = that;
        
            this.$http.get('/admin/getProductOptions/' + this.product_id, function(options) {
                that.options = options;
                console.log(options);
            });
        },

Post any errors from the console or the network tab.

In console I get : Uncaught ReferenceError: Invalid left-hand side in assignment

Which corresponds to this line: this = that;

Sorry!

var that = this;

Upon viewing source also I see this <input type="hidden" name="product_id" value="36" v-model="product_id"> with the v-model showing product_id rather than the value of 36

The v-model shouldn't be showing at all. Check with a ready function if Vue is working properly.

This is all I have in the ready function

ready: function() {
        this.fetchOptions();
    },

Should I add this.product_id(); too?

ready: function() {
        alert('Testing Vue!');
    },

Just check for an alert message.

If it comes, post your complete js file, and i'll try to figure it out on my end.

Yes I got the alert just fine.

Full js is

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
Vue.config.debug = false;

new Vue({

    el: '#productOptions',

    data: {
        product_id: '',
        options: []
    },

    ready: function() {
        alert('Testing Vue!');
        this.fetchOptions();
    },

    methods: {
        // Fetch all options for given product
        // Needs to get the ID from the edit page, so when I click edit the URL is admin/products/36/edit 
               //so it needs that id of 36 in this instance
        fetchOptions: function() {
                     this.$http.get('/admin/getProductOptions/' + this.product_id, function(options) {
                     this.$set('options', options);
                     console.log(options);
            });
        },
    
// This method then I should be able to pass some data through to update the correct field within the db.
        onUpdate: function(e) {
            e.preventDefault();
            e.stopPropagation();

            this.options.push(options);

            this.$http.post('/admin/updateProductOption/' + this.product_id, options);
            window.history.go(-1);

        },
    },


});

Post the rendered html.. From the check source option..

Every piece of data/ functions/ properties etc inside your Vue object is limited to the html tag it is bound to.

If your input element which you have used v-model with, is outside the #productOptions element, then it won't work.

If this was a silly mistake, then continue ahead. But if you didn't know this, I would suggest practicing Vue by creating a static app and trying and testing all the features and directives mentioned in the documentation.

Don't complicate things by using laravel and vue-resource. At least for now.

Also, use the code I had given earlier in your fetchOptions, with the alteration given in the next comment.

Ok had to view source to find your answer, i'll try that my bad forgot about the el binding