Display data in Vuejs

Question

I need to display only name from request in my form, can't figure out how to do it. I'm just starting with js, need help.

I have tried this {{ request.name }} but doesn't work. {{request}} shows me full data.

const app = new Vue({
      el:'#valuation-request',
      data() {
        return {
          step:1,
          request:{
            name:null,
            industry:'{{ $company->industry }}',
            valuation_date:null,
            similar_comp:null,
            total_raised:null,
            sales_transactions:null
          }
        }
      },
      methods:{
        prev() {
          this.step--;
        },
        next() {
          this.step++;
        }


      }
    });

name is null so it's not going to print anything. Are you setting it's value somewhere else? — Brian Lee
– Brian Lee, Commented Jun 28, 2018 at 23:48
I'm setting it in form <input type="text" class="uk-input" name="name" v-model="request.name" id="name" placeholder="e.g. John Doe" required> — Philipp Kishkovarov
– Philipp Kishkovarov, Commented Jun 29, 2018 at 2:09

Bert · Accepted Answer · 2018-06-29 02:16:50Z

3

If name has a value, it should display as you wrote it. If it's null, nothing will be displayed.

const app = new Vue({
      el:'#valuation-request',
      data() {
        return {
          step:1,
          request:{
            name: null,
            industry:'{{ $company->industry }}',
            valuation_date:null,
            similar_comp:null,
            total_raised:null,
            sales_transactions:null
          }
        }
      },
      methods:{
        prev() {
          this.step--;
        },
        next() {
          this.step++;
        }


      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="valuation-request">
  {{request.name}}
  <hr>
  Name: <input type="text" class="uk-input" name="name" v-model="request.name" id="name" placeholder="e.g. John Doe" required>
</div>

edited Jun 29, 2018 at 2:16

answered Jun 28, 2018 at 23:49

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Philipp Kishkovarov Over a year ago

I'm setting name in form <input type="text" class="uk-input" name="name" v-model="request.name" id="name" placeholder="e.g. John Doe" required>

Bert Over a year ago

@PhilippNoris I don't see the issue. Note the change to the example above.

Philipp Kishkovarov Over a year ago

I found the problem :) Thanks!

Collectives™ on Stack Overflow

Display data in Vuejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related