Is Vue 3 backwards compatible with Vue 2? - vue.js

In different posts around the internet (for example this one) I found that Vue 2 code should work with Vue 3 but for me it does not. For example I have simple component
<template>
<div class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
<table class="table">
<thead>
<tr class="text-left">
<th>
<label>
<input type="checkbox">
</label>
</th>
<th>User ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Gender</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" name="1">
</label>
</td>
<td> <span>{{ id }}</span> </td>
<td> <span>Cort</span> </td>
<td> <span>Tosh</span> </td>
<td> <span>{{ email }}</span> </td>
<td> <span>Male</span> </td>
<td> <span>327-626-5542</span> </td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
id: 1,
email: 'test#mail.com'
}
},
mounted() {
alert('mounted');
},
created() {
alert('created');
}
};
</script>
The table is generated just fine, but both mounted and created not fired when component made. Also the email and id not shown. Only the table is shown.

Your code works:
Vue.createApp({
data() {
return {
id: 1,
email: 'test#mail.com'
}
},
created() {
alert('created')
},
mounted() {
alert('mounted')
}
}).mount('#app')
<script src="https://unpkg.com/vue#next"></script>
<div id="app" class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
<table class="table">
<thead>
<tr class="text-left">
<th>
<label>
<input type="checkbox">
</label>
</th>
<th>User ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Gender</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" name="1">
</label>
</td>
<td> <span>{{ id }}</span> </td>
<td> <span>Cort</span> </td>
<td> <span>Tosh</span> </td>
<td> <span>{{ email }}</span> </td>
<td> <span>Male</span> </td>
<td> <span>327-626-5542</span> </td>
</tr>
</tbody>
</table>
</div>

Related

How to pass value to model (Vuejs 3)

in my Vuejs3 project, there is a form in which the new row will be generated by pressing a button, so I put an array to handle new rows then I need to validate inputs, but after validation of the input of the array, the value didn't pass to model, but it works without the validation.. please help me to understand the mistake that I did.
The Form:
<table class="table table-stripped table-border">
<thead>
<tr>
<th>#</th>
<th style="width: 18%">
Medikament <span class="text-danger">*</span>
</th>
<th style="width: 9%">Milligram</th>
<th style="width: 9%">
Packung <span class="text-danger">*</span>
</th>
<th style="width: 7%">
Stück <span class="text-danger">*</span>
</th>
<th style="width: 19%">Apothekenname</th>
<th style="width: 24%">Adresse der Apotheke</th>
<th style="width: 14%">Postleitzahl</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in patientRequestForCreationDtos" :key="index">
<td>{{ index + 1 }}</td>
<td>
<input type="text" v-model="item.drugName" class="form-control" />
</td>
<td>
<input type="number" v-model="item.milligram" class="form-control" />
</td>
<td>
<input type="number" v-model="item.box" class="form-control" />
</td>
<td>
<input type="number" v-model="item.total" class="form-control" />
</td>
<td>
<input type="text" class="form-control" v-model="item.drugStoreName" :readonly="patientDetails.isElga == false" />
</td>
<td>
<input type="text" class="form-control" v-model="item.drugStoreAddress" :readonly="patientDetails.isElga == false" />
</td>
<td>
<input type="text" class="form-control" v-model="item.drugStorePostalCode" :readonly="patientDetails.isElga == false" />
</td>
<td>
<button type="button" #click="deleteRequestItemRow(index)" class="btn btn-sm btn-danger">
-
</button>
</td>
</tr>
</tbody>
</table>
The Array:
patientRequestForCreationDtos: [{
milligram: null,
box: null,
total: null,
drugStoreName: "",
drugStoreAddress: "",
drugStorePostalCode: "",
drugName: "",
}, ],
The validation function:
checkValidation() {
if (!this.patientRequestForCreationDtos.drugName) {
Swal.fire("drug name is required...");
return;
}
return true;
},
```js
---
it always says => drug name is required..
this.patientRequestForCreationDtos is array. maybe you can do this.
checkValidation(patientRequestForCreationDto) {
if (!patientRequestForCreationDto.drugName) {
Swal.fire("drug name is required...");
return;
}
return true;
},
if you'll have only one element in patientRequestForCreationDtos then you gotta choose first element in the array and then check its property
checkValidation() {
if (!this.patientRequestForCreationDtos[0].drugName) {
Swal.fire("drug name is required...");
return;
}
return true
},
also if your patientRequestForCreationDtos is always gonna be an array then you might find this helpful

Showing table heading once in VueJS component

I have a search built in VueJS and the results of the search are displayed in a separate component. I want to display the data in a table with the table headings. The issue I'm having is that the table heading appears before each row. How do I get it to appear once? Im sure this is easy but I cant think how to do this. Im fairly new to Vue, so any help appreciated.
<table class="table table-hover" id="simpleTable">
<thead>
<tr>
<th
v-on:click="sortTable(title)"
:key="title"
scope="col"
class="col-md-3"
>
Course
</th>
<div
class="arcoursedata"
v-if="title == sorttitle"
v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
></div>
<th scope="col">Award</th>
<th scope="col">Level</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3">
{{ title }}
</td>
<td>
{{ award }}
</td>
<td class="col-md-3">
{{ level }}
</td>
<td class="col-md-3">
<a
:href="result.displayUrl"
class="btn-sm btn-primary"
role="button"
>
<span class="sr-only">Read more about {{ title }}</span> Read
more</a
>
</td>
</tr>
</tbody>
</table>
You need to separate row from tbody to component. And do v-for only on this component and not on the entire table.
It will be look like:
<table class="table table-hover" id="simpleTable">
<thead>
<tr>
<th
v-on:click="sortTable(title)"
:key="title"
scope="col"
class="col-md-3"
>
Course
</th>
<div
class="arcoursedata"
v-if="title == sorttitle"
v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
></div>
<th scope="col">Award</th>
<th scope="col">Level</th>
</tr>
</thead>
<tbody>
<rowComponent v-for="rowData in tableData" :row="rowData"></rowComponent>
</tbody>
</table>
And RowComponent will look like:
<td class="col-md-3">
{{ row.title }}
</td>
<td>
{{ row.award }}
</td>
<td class="col-md-3">
{{ row.level }}
</td>
<td class="col-md-3">
<a :href="row.displayUrl"
class="btn-sm btn-primary"
role="button">
<span class="sr-only">Read more about {{ row.title }}</span> Read
more</a>
</td>
<script>
export default {
name: "rowComponent",
props: ['row']
}
</script>

How to get the ID from a table inside a b-modal and display on the page in VUEJS

I am facing issue where i want to get the ID from the table when clicking on the button inside a modal and display it on the main page.
Here is the HTML code
<template>
<div class="hello">
<p>Selected id :</p>
<b-button class="mt-2" variant="primary" v-b-modal.modal-xl>
Select codes
</b-button>
<b-modal id="modal-xl" size="lg" centered hide-footer="true">
<table class="table sortable" data-page-list="[10, 25, 50, 100, all]">
<thead>
<tr>
<th>ID</th>
<th>Code</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2222</td>
<td>
<b-button variant="primary">Select</b-button>
</td>
</tr>
<tr>
<td>2</td>
<td>33333</td>
<td>
<b-button variant="primary">Select</b-button>
</td>
</tr>
<tr>
<td>3</td>
<td>4444</td>
<td>
<b-button variant="primary">Select</b-button>
</td>
</tr>
</tbody>
</table>
</b-modal>
</div>
</template>
Here is the Codesandbox for it.
Any help much appreciated.
One way to do that is to save the selected ID as the local state. In addition, I'd recommend using v-for and an array to store the codes list, and then you can pass the id to the event:
<template>
<div class="hello">
<p>Selected id: {{ selected }}</p>
<b-button class="mt-2" variant="primary" v-b-modal.modal-xl>
Select codes
</b-button>
<b-modal id="modal-xl" size="lg" centered hide-footer="true">
<table class="table sortable" data-page-list="[10, 25, 50, 100, all]">
<thead>
<tr>
<th>ID</th>
<th>Code</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr v-for="code in codes" :key="code.id">
<td>{{ code.id }}</td>
<td>{{ code.code }}</td>
<td>
<b-button variant="primary" #click="onSelected(code.id)">Select</b-button>
</td>
</tr>
</tbody>
</table>
</b-modal>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
codes: [
{id: 1, code: 2222},
{id: 2, code: 3333},
{id: 3, code: 4444},
],
selected: null
}
},
methods: {
onSelected: function(id) {
this.selected = id;
}
}
};
</script>
You can check out a working example here.

Setting a Form Value in Vue Js

I am using Struts 1.x in my application. Recently i used Vue js.So, I use the same jsp page for Adding and updating (in this case company). So When i click edit, the details are fetched the page is redirected to that page and form values are set from the action class.
Here is the html portion
<form action="company.do" method="post" name="companyForm">
<html:hidden property="method" value="doAddUpdateCompany" />
<html:hidden property="companyId" value="${companyForm.companyId}" />
<div class="row" >
<div class="col-md-9">
<div class="grid simple">
<div class="grid-title ">
<h4>
<logic:equal value="addCompany" property="method" name="companyForm">
New <span class="semi-bold">Company</span>
</logic:equal>
<logic:equal value="updateCompany" property="method" name="companyForm">
Edit <span class="semi-bold">Company</span>
</logic:equal>
</h4>
<div class="tools"> </div>
</div>
<div class="grid-body">
<table class="tbl_wall" style="width: 100%" >
<tr >
<td class="fi_wall" >Company Name<span class="notify style16"> *</span></td>
<td class="fi_wall" ><html:text property="companyName" name="companyForm" styleClass="med_txt" /></td>
<td> </td>
</tr>
<tr>
<td class="fi_wall" valign="top" >Company Code<span class="notify style16"> *</span> (3 Letter)</td>
<td class="fi_wall" valign="middle" ><html:text property="companyCode" maxlength="3" styleClass="med_txt" name="companyForm" /></td>
<td> </td>
</tr>
<tr id="cmp">
<td class="fi_wall">Company Type </td>
<td class="fi_wall"><select name="companyType" v-model="companyType">
<option value="-1">select</option>
<option v-for=" result in results " v-bind:value="result.commonId">
{{ result.name}}</option>
</select></td>
</tr>
<tr>
<td colspan="3" align="center">
<button type="button" class="btn btn-success" onclick="doSave()" ><i class="fa fa-save"></i> Save</button>
</td>
</tr>
</table> </form>
and the vue Portion
<script type="text/javascript">
new Vue({
el: '#cmp',
data: {
results: [],
companyType : '-1'
},
mounted() {
axios.get('/easyoffice/companyType.do?method=getCompanyTypeAjax').then(response => {
this.results = response.data,
this.companyType = document.forms['companyForm'].companyType.value
})
.catch(e => {
this.errors.push(e)
})
}
});</script>
i used this.companyType = document.forms['companyForm'].companyType.value to set form value but it is not working. Any Thoughts?

Vuejs - reading data from table

I'm trying to pull an updated value out of the table below to send it to database, but it appears that Vue does not support two-way data binding. Could anyone give me a hint on how I extract the current cell value and pass it to a function saving new data to a database?
<table v-if="tableData.length > 0" class="table table-bordered table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Date From</th>
<th scope="col">Date To</th>
<th scope="col">Days</th>
<th scope="col">Type</th>
<th scope="col">Request Date</th>
</tr>
</thead>
<tbody>
<tr v-for="(object, index) in tableData" :key="index">
<th scope="=row"><label class="tableNumberColumn">{{index + 1}}</label></th>
<td #change="readData" v-for="(value, key) in object" :key="key" v-if="key != 'formId'">
<div #change="readData" class="container tableColumnDiv" v-if="key === 'numberOfDays'" contenteditable="true">{{value}}</div>
<div class="container tableColumnDiv" v-else-if="key === 'timeOffType'" contenteditable="true">{{value}}</div>
<div v-else>
<datepicker :value="value" :bootstrap-styling="true"></datepicker>
</div>
</td>
<td>
<b-button #click="deleteRow(index)" class="btn btn-sm buttonDelete">Delete</b-button>
</td>
<td>
<b-button #click="update(index)" class="btn btn-sm buttonUpdate">Update</b-button>
</td>
<td>
<b-button class="btn btn-sm buttonPrint">Print</b-button>
</td>
</tr>
</tbody>
I am pasting the code one more time as I've removed some unnecessary stuff:
<table v-if="tableData.length > 0" class="table table-bordered table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Date From</th>
<th scope="col">Date To</th>
<th scope="col">Days</th>
<th scope="col">Type</th>
<th scope="col">Request Date</th>
</tr>
</thead>
<tbody>
<tr v-for="(object, index) in tableData" :key="index">
<th scope="=row"><label class="tableNumberColumn">{{index + 1}}</label></th>
<td v-for="(value, key) in object" :key="key" v-if="key != 'formId'">
<div class="container tableColumnDiv" v-if="key === 'numberOfDays'" contenteditable="true">{{value}}</div>
<div class="container tableColumnDiv" v-else-if="key === 'timeOffType'" contenteditable="true">{{value}}</div>
<div v-else>
<datepicker :value="value" :bootstrap-styling="true"></datepicker>
</div>
</td>
<td>
<b-button #click="deleteRow(index)" class="btn btn-sm buttonDelete">Delete</b-button>
</td>
<td>
<b-button #click="update(index)" class="btn btn-sm buttonUpdate">Update</b-button>
</td>
<td>
<b-button class="btn btn-sm buttonPrint">Print</b-button>
</td>
</tr>
</tbody>