My php script was working fine with vuetify data, but now every page is showing the error message:
Your search for "{{ search }}" found no resultsIt seems like this issue occurs when the script cannot fetch data from the database. Here is my database class.
class Database
{
public $id;
public $user;
public $user_name;
public $password;
public static function db()
{
$host = 'localhost';
$dbName = 'newdata';
$userName = "root";
$password = "";
$db = "mysql:host=$host;dbname=$dbName";
try {
$pdo = new PDO($db, $userName, $password);
} catch (PDOException $e) {
throw new PDOException($e->getMessage());
}
return $pdo;
}
}
The username and password are correct, as I can connect to SQL on my remote server using them.
Here is a snippet of the code that results in the error mentioned above.
<v-app>
<v-card>
<div class="row card-body">
<div class="col-sm-12">
<div class="row col-sm-12">
<div class=" col-sm-3">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">TO</label>
<div class="col-sm-10">
<input type="date" class="form-control form-control-sm" v-model="endDate">
</div>
</div>
</div>
<div class="col-sm-2">
<button type="submit" class="btn btn-success btn-sm" v-on:click="getReport(ts)" style="margin-top:-5px">Submit</button>
</div>
</div>
</div>
</div>
<v-card-title>
<b>Balance Report</b>
</details>
<v-spacer></v-spacer>
<v-text-field
append-icon="search"
label="Search"
single-line
hide-details
v-model="search"
"></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="Report"
:search="search"
">
<template slot="items" slot-scope="props">
<td>{{ props.item.col1 }}</td>
<td>{ props.item.col2}}</td>
<td>{ props.item.col3}}</td>
<td>{ props.item.col4}}</td>
<td>{ props.item.col5}}</td>
</template>
<v-alert slot="no-results" :value="true" color="error" icon="warning">
Your search for "{{ search }}" found no results.
</v-alert>
"lt;/v-data-table>
</v-card>
</v-app>
Can anyone suggest where it might be stuck? Apologies for not including the entire PHP code here, as it was functioning well for many days before suddenly encountering this issue.
Below is my Vue class structure:
var UsageReport = new Vue({
el:'#UsageReport',
data(){
return{
Report:[],
search: '',
headers: [
{ text: 'value1', value: 'col1 ' },
{ text: 'value2', value: 'col2 ' },
{ text: 'value3', value: 'col3 ' },
{ text: 'value4', value: 'col4 ' },
{ text: 'value5', value: 'col5 ' },
],
variabl1:'',
variabl2:'',
variabl3:'',
variabl4:''
}
},