Why does v-model not update the variable?

Question

Why does v-model not update the variable?

Navigation

#1 by (3 votes)

0

With the following code I can make request.limits update with the input text , however when I make the request $.http , the value assigned by default is sent.

How do I send the updated request.limits with the value of input ?

JS

var dataResponse = new Vue({
      el: '#govue',
      data: {
       productos : [
                             { 
                                sku: '0' ,
                                model: '0' ,
                                description: '0' ,
                                color: '0' ,
                                price: '0' ,
                                saleprice: '0' ,
                             }
                        ],
        request : [
                        {
                            limits: "0-0",
                            portal: "none"
                        }
                     ],
        feed: "none",
        bolData: false,
        status: "none"
        },

      methods:{

         createProduct: function(){

                this.status ="loading data...";
                this.bol=true;

                this.$forceUpdate();
             this.$http.post('newSiaScrap.php',{ data: this.request }).then(function (response) {
                  // success callback
            this.ajax=response.body;
                console.log("resp:"+response);
                this.bol=false;
                this.carga = "loaded!";
              }, function (response) {

                alert("error");
              });
             return false;
         }
      }
    });

HTML

<div id="govue">
<div class="col-md-8 col-md-offset-2">
    <hr><br>
    <h1>Creaciones automáticas </h1>
    <code>AgmDeveloper Powah! pls.. update DB</code>
    <hr>
    <code>
        UPDATE PRODUCT_SCRAP_INV set Band_Tone='Dorado' WHERE Band_Tone='oro' <br>
        UPDATE PRODUCT_SCRAP_INV set Band_Tone='Plateado' WHERE Band_Tone='acero'<br>
        UPDATE PRODUCT_SCRAP_INV set Water_Resistant=Water_Resistant+'ts' WHERE Water_Resistant like '%m' <br>
        PANAMA REQUIRED  DELETE PRODUCT WEIGHT<br>
    </code>


    <label for="portal">PORTAL:</label>
        <select name="portal" id="portal" class="form-control">
            <option value="ECUADOR">ECUADOR</option>
            <option value="PANAMA">PANAMA</option>

        </select>

        <label for="limit">Rango de búsqueda en OTB:</label>
        <input type="text" v-model="request.limits" name="limits" id="limit" placeholder="from-to  [0-800]" class="form-control">
        <hr>
        <input type="button" value="Run Forest Run"  v-on:click="createProduct" class="btn">

    <h1> {{ request.limits }}</h1>
</div>

<div class="container">
    <table v-if="bolData" class="table table-responsive">
        <tbody>
            <tr id="dataTh">
                    <th>Sku</th>
                    <th>Model</th>
                    <th>Description</th>
                    <th>Color</th>
                    <th>Precio</th>
                    <th>PrecioOferta</th>
            </tr>
            <tr id="data">

            </tr>
        </tbody>
    </table>

</div>
</div>

javascript vue.js

asked by Andress Blend 09.01.2018 в 20:55

source

1 answer

Validate duplicate records (SQL SEREVER) OnClick Jquery Event [closed]

score 3 · Accepted Answer

The problem is because you have defined request as an array with an object inside, but when you make bind , you do it, as if request were an object with property limits ( eg: v-model="request.limits" )

Solution:

You could define request as an object:

request: {
  limits: "0-0",
  portal: "none"
},

Demo:

var dataResponse = new Vue({
  el: '#govue',
  data: {
    productos: [{
      sku: '0',
      model: '0',
      description: '0',
      color: '0',
      price: '0',
      saleprice: '0',
    }],
    request: {
      limits: "0-0",
      portal: "none"
    },
    feed: "none",
    bolData: false,
    status: "none"
  },

  methods: {

    createProduct: function() {

      this.status = "loading data...";
      this.bol = true;

      this.$forceUpdate();
      console.log(this.request);
      this.$http.post('newSiaScrap.php', {
        data: this.request
      }).then(function(response) {
        // success callback
        this.ajax = response.body;
        console.log("resp:" + response);
        this.bol = false;
        this.carga = "loaded!";
      }, function(response) {

        alert("error");
      });
      return false;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="govue">
  <div class="col-md-8 col-md-offset-2">
    <hr><br>
    <h1>Creaciones automáticas </h1>
    <code>AgmDeveloper Powah! pls.. update DB</code>
    <hr>
    <code>
        UPDATE PRODUCT_SCRAP_INV set Band_Tone='Dorado' WHERE Band_Tone='oro' <br>
        UPDATE PRODUCT_SCRAP_INV set Band_Tone='Plateado' WHERE Band_Tone='acero'<br>
        UPDATE PRODUCT_SCRAP_INV set Water_Resistant=Water_Resistant+'ts' WHERE Water_Resistant like '%m' <br>
        PANAMA REQUIRED  DELETE PRODUCT WEIGHT<br>
    </code>


    <label for="portal">PORTAL:</label>
    <select name="portal" id="portal" class="form-control">
            <option value="ECUADOR">ECUADOR</option>
            <option value="PANAMA">PANAMA</option>

        </select>

    <label for="limit">Rango de búsqueda en OTB:</label>
    <input type="text" v-model="request.limits" name="limits" id="limit" placeholder="from-to  [0-800]" class="form-control">
    <hr>
    <input type="button" value="Run Forest Run" v-on:click="createProduct" class="btn">

    <h1> {{ request.limits }}</h1>
  </div>

  <div class="container">
    <table v-if="bolData" class="table table-responsive">
      <tbody>
        <tr id="dataTh">
          <th>Sku</th>
          <th>Model</th>
          <th>Description</th>
          <th>Color</th>
          <th>Precio</th>
          <th>PrecioOferta</th>
        </tr>
        <tr id="data">

        </tr>
      </tbody>
    </table>

  </div>
</div>