components in Vue.js

Question

I am a bigenner programmer with some experience in Java. Now I am trying to learn JS with Vue.js framework. I got these piece of repetead code and I want to replace them with a Vue component with different data for each single instance. The code represents five different div's for mobile phones. I need to create a mobile phone component and pass some parameters for each phone. Could you show an example of how to do this? It would be really helpful to understand the concept of the components in Vue.js. Thanks in advance.

The code:

        <div class="phone">
      <img src="https://www.technobuffalo.com/wp-content/uploads/2017/02/[email protected]">
      <section>
        <h2>iPhone Z</h2>
        <ul>
          <li>Semitransparent telefon</li>
          <li>5G ready</li>
          <li>Handhållare</li>
        </ul>
      </section>
      <input type="radio" name="phone" value="200">
    </div>
    <div class="phone">
      <img src="https://images.techhive.com/images/idge/imported/imageapi/2015/01/14/17/011011-iphoney5-2-100546391-gallery.idge.jpg">
      <section>
        <h2>iPhone G</h2>
        <ul>
          <li>Armbandstelefon</li>
          <li>Projicerad skärm</li>
          <li>Virtual touch</li>
        </ul>
      </section>
      <input type="radio" name="phone" value="250">
    </div>
    <div class="phone">
      <img src="http://www.newsmobile.in/wp-content/uploads/2017/06/iPhone1.jpg">
      <section>
        <h2>iPhone Mini</h2>
        <ul>
          <li>Retrodesign</li>
          <li>Face recognition</li>
          <li>Handhållare</li>
        </ul>
      </section>
      <input type="radio" name="phone" value="110">
    </div>
    <div class="phone">
      <img src="http://cdn.images.express.co.uk/img/dynamic/59/590x/secondary/update-samsung-gear-s3-android-wear-google-801981.jpg">
      <section>
        <h2>Samsung Wear</h2>
        <ul>
          <li>Look cool</li>
          <li>Feel hot</li>
          <li>Arm-processor</li>
        </ul>
      </section>
      <input type="radio" name="phone" value="200">
    </div>
    <div class="phone">
      <img src="http://thefoxisblack.com/blogimages//samsung-display-centric-world.jpg">
      <section>
        <h2>iDrink Nokia</h2>
        <ul>
          <li>Smakinterface</li>
          <li>Tungstyrd</li>
          <li>No more cool-aid</li>
        </ul>
      </section>
      <input type="radio" name="phone" value="100">
    </div>
  </div>
</div>

aprouja1 · Accepted Answer · 2018-04-17 11:59:47Z

1

<div class="phone">
  <img src="https://www.technobuffalo.com/wp-content/uploads/2017/02/[email protected]">
  <section>
    <h2>iPhone Z</h2>
    <ul>
      <li>Semitransparent telefon</li>
      <li>5G ready</li>
      <li>Handhållare</li>
    </ul>
  </section>
  <input type="radio" name="phone" value="200">
</div>

Would become:

<div class="phone">
  <img :src="imageSource">
  <section>
    <h2>{{phoneName}}</h2>
    <ul>
      <li v-for="line in description">{{line}}</li>
    </ul>
  </section>
  <input type="radio" name="phone" :value="phoneValue">
</div>

Then in your parent component you would pass those props like so:

<phone-template 
    v-for="phone in phoneList"
    :imageSource="phone.src"
    :phoneName="phone.name"
    :description="phone.description"
    :phoneValue="phone.value"
/>

answered Apr 17, 2018 at 11:59

aprouja1

1,82011 silver badges17 bronze badges

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

2 Comments

Dhiaa Eddin Anabtawi Over a year ago

And where to pass the values for these parameters?

aprouja1 Over a year ago

In the Data property. I would recommend going through one of the Vue tutorials vuejs.org/v2/guide/#Getting-Started

Collectives™ on Stack Overflow

components in Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related