<template>
<div>
<sweet-modal modal-theme="dark" ref="login-modal">
<form action="" ref="login-form">
<div class="form-group">
<label>Username</label>
<input v-model="form.login" name="login" type="text" class="form-controll" />
</div>
<div class="form-group">
<label>Password</label>
<input v-model="form.password" name="password" type="text" class="form-controll" />
</div>
<div class="error" ref="login-error">
{{form.errorMessage}}
</div>
<button @click.prevent="login" class="btn btn-info">Login</button>
</form>
</sweet-modal>
</div>
</template>
<script>
import { SweetModal } from 'sweet-modal-vue'
export default {
components: {
SweetModal,
},
methods: {
async login(){
var form = new FormData();
var elements = this.$refs['login-form'].getElementsByTagName('input')
for (var i = 0; i < elements.length; i++) {
form.set(elements[i].name, elements[i].value);
}
await this.$store.dispatch('login', form);
this.data.form = this.$store.getters.data;
}
},
data(){
return {
form: {
login: '',
password: '',
error: '',
errorMessage: '',
token: '',
}
}
},
mounted(){
this.$refs['login-modal'].open();
},
}
</script>{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// Provide path to the file with resources
resources: './src/sass/main.scss'
},
},
],
},public function __get($name)
{
if (isset($this->_attributes[$name]) || array_key_exists($name, $this->_attributes)) {
return $this->_attributes[$name];
}
if ($this->hasAttribute($name)) {
return null;
}
if (isset($this->_related[$name]) || array_key_exists($name, $this->_related)) {
return $this->_related[$name];
}
$value = parent::__get($name);
if ($value instanceof ActiveQueryInterface) {
$this->setRelationDependencies($name, $value);
return $this->_related[$name] = $value->findFor($name, $this);
}
return $value;
}
Исправил.
Спасибо за наводку. Мне нужно глобальное реактивное свойство, и хотелось бы не использовать vuex а максимально изолировать компонент.