CODEWITHSUNDEEP
javascripthtmlarraysvue.jsvuejs2
user6272906
user6272906

Reputation:

How to simplify this code of VueJS

I want to show multiple data from an array without using array index but i want it to automatically show data every time in the same format without using li & tables.

My Code:

<!DOCTYPE html>
<html>
	<head>
	<title>VueJS</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	
	<body>
		<div class="root">
			<center>
			<h1> {{names[0]}} </h1> <p> By <b>{{authors[0]}}</b> </p>
			<p><b>{{dates[0]}}</b> in <b>{{language}}</b></p><hr>
			<h1> {{names[1]}} </h1> <p> By <b>{{authors[1]}}</b> </p>
			<p><b>{{dates[1]}}</b> in <b>{{language}}</b></p><hr>
			<p>Update Any Changes You Want.</p>
			<input type="text" id="text" v-model="names[0]"></input>
			<input type="text" id="text" v-model="authors[0]"></input>
			<input type="text" id="text" v-model="dates[0]"></input>
			<input type="text" id="text" v-model="language"></input> </br> </br>
			<input type="text" id="text" v-model="names[1]"></input>
			<input type="text" id="text" v-model="authors[1]"></input>
			<input type="text" id="text" v-model="dates[1]"></input>
			<input type="text" id="text" v-model="language"></input></center><hr>
		</div>
	
	
	<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
	
	<script>

		new Vue ({
			el: '.root',
			data: book = 
			{
				names: ['Hamlet', 'A Boys Will'],
				authors: ['William Shakespeare', 'Robert Frost'],
				dates: ['1609', '1913'],
				language: 'English'
			}
		})
	</script>
	</body>
</html>

Right Now i am using array index to print out values of array. What will be the easiest way to show multiple values?

Thanks.

Upvotes: 2

Views: 147

Answers (1)

Reşit K&#246;rsu
Reşit K&#246;rsu

Reputation: 598

<!DOCTYPE html>
<html>
    <head>
    <title>VueJS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    
    <body>
        <div id="root">
            <div class="text-center" v-for="book in books">
              <h1> {{ book.name }} </h1> 
        <p> By <b>{{ book.author }}</b> </p>
        <p><b>{{ book.date }}</b> in <b>{{ book.language }}</b></p>
        <input type="text" v-model="book.name">
        <input type="text" v-model="book.author">
        <input type="text" v-model="book.date">
        <input type="text" v-model="book.language">
        <hr>
            </div>
      <p>Update Any Changes You Want.</p>
    </div>
    
    
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

    <script>

      new Vue({
        el:'#root',
        data: {
          books: [
            {
              name: 'Hamlet',
              author: 'William Shakespeare',
              date: '1609',
              language: 'English'
            },
            {
              name: 'A Boys Will',
              author: 'Robert Frost',
              date: '1913',
              language: 'English'
            }
          ]
        }
      })
      </script>
    </body>
</html>

You can use 'v-for' iterator inside your template to iterate an array items or objects as you like, not only lists or tables. And I recommend you to use an id for your root element like '#root' instead of class.

Since I am used to javascript object format for these kind of iterations i converted your arrays into javascript objects.

You can check further from Vue's official docs. https://v2.vuejs.org/v2/guide/list.html

Upvotes: 1

Related Questions