I want to display new line, I use tag but not work.
The original idea was to new a component, and then customize error-messages to div, But it’s too much trouble, so come to ask if there is an easy way
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
methods: {
},
data: {
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.3/vue.js"></script>
<script src="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.js"></script>
<link rel=stylesheet type="text/css" href="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.css">
<div id="app">
<v-app dark>
<v-text-field
label="Field"
error-messages="aaa<br>bbb"
></v-text-field>
</v-app>
</div>
This is a possible solution.
https://jsfiddle.net/ue9rqcwk/
HTML:
<div id="app">
<v-app dark>
<v-text-field
class="multiline"
label="Field"
error-messages="aaa
bbb"
></v-text-field>
</v-app>
</div>
css:
.multiline {
white-space: pre-line;
}
EDIT: Corrected URL
Related
I am new to Vuetify and vue. I am using vue and vuetify but due some reason I am not able open my page.The error I am getting when I run my project:
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
found in
---> at resources/js/components/appContainer.vue
My code:
appContainer.vue
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
app
>
<v-list dense>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-home</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Home</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-contact-mail</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Contact</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar
app
color="indigo"
dark
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col class="text-center">
<v-tooltip left>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon large>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</v-content>
<v-footer
color="indigo"
app
>
<span class="white--text">© 2019</span>
</v-footer>
</v-app>
</template>
<script>
export default {
props: {
source: String,
},
data: () => ({
drawer: null,
}),
}
</script>
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from './plugins/vuetify'
Vue.use(Vuetify);
Vue.component('app-container', require('./components/appContainer.vue').default);
const app = new Vue({
Vuetify,
Vue,
el: '#app',
});
spa.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<app-container></app-container>
</div>
</body>
</html>
vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Seems like you haven't given an export name for your app-container element. Try the below.
appContainer.vue
<template>
...
</template>
<script>
export default {
name: 'app-container'
props: {
source: String,
},
data: () => ({
drawer: null,
}),
}
</script>
Try to change the drawer from null to false:
data: () => ({
drawer: false,
}),
Please make your component name camelcase.
Like Vue.component('appContainer',require('./components/apContainer.vue').default);
I would like to define the default font-color for the navigation-drawer and toolbar.
I looked at changing colors through theming: https://vuetifyjs.com/en/customization/theme
Aswell as overriding scss defaults: https://vuetifyjs.com/en/customization/sass-variables
But nowhere can i find changing the needed setting.
Playground: codepen io/timar/pen/WNvxOYB
The Vuetify CSS has multiple color classes for background as well as text. The format for the text color classes are in the format of: .[color]--text. There is also various flavoring for lighten, darken and accent in the format of: .text--lighten-2, for example. The naming of colors and such can be found at the Vuetify Colors page.
What I have shown below, essentially forking the codepen in the OP, illustrates a method, customColor, to return a CSS class to set the text color based on the item.title value that is called on v-list-item-title.
Vue.config.productionTip = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
items: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard' },
{ title: 'Photos', icon: 'mdi-image' },
{ title: 'About', icon: 'mdi-help-box' },
],
right: null,
}
},
methods: {
customColor(text) {
return (text === 'Photos') ? 'green--text' : '';
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.1.14/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-card
height="400"
width="256"
class="mx-auto"
>
<v-navigation-drawer permanent>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="title">
Application
</v-list-item-title>
<v-list-item-subtitle>
subtext
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list
dense
nav
>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title
:class="customColor(item.title)"
>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-card>
</v-app>
</div>
Getting this error when attempting to use a Vuetify component out of the box. Perhaps just my lack of understanding how to implement Vuetify components in Laravel.
Laravel v5.8.35, Vue v2.6.10, Vuetify v2.0.18.
error:
[Vue warn]: Error in render: "TypeError: Cannot read property 't' of
undefined"
found in
---> < VSelect >
< Test > at resources/js/components/Test.vue
< Root >
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
import Vuetify from 'vuetify';
Vue.use(Vuetify);
Vue.component('test', require('./components/Test.vue').default);
const app = new Vue({
el: '#app',
});
layouts/vue.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Vue Examples</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div id="app">
#yield("content")
</div>
<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
test.blade.php
#extends('layouts.vue')
#section('content')
<test></test>
#endsection
components/Test.vue
<template>
<v-container fluid>
<v-row align="center">
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
label="Standard"
></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
filled
label="Filled style"
></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
label="Outlined style"
outlined
></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
label="Solo field"
solo
></v-select>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
}),
}
</script>
As you can see, the vue file is exactly the source from Vuetify for the v-select component. Components that don't include this works:
export default {
data: () => ({
All other components (e.g. ExampleComponent) work fine.
You need to create an instance of Vuetify. e.g.:
new Vue({
el: '#app',
vuetify: new Vuetify()
})
This is documented here, though they do hide it quite a long way down the page.
So I have tried to fix this in multiple different ways and I know Vuetify is updated because I have reinstalled it in NPM before I used it.
I have some screenshots of the current problem but the weird part is its working in another project I am using and its running the same libraries.
https://i.imgur.com/UXK9DiB.png
https://i.imgur.com/ZoRl7e8.png
Code for uncolored component
<html>
<head>
<title>XRPLife Interfaces</title>
<link rel="stylesheet" href="libraries/vuetify/dist/vuetify.min.css">
</head>
<body>
<v-app>
<div id="test">
<v-text-field label="Testing" v-model="test"></v-text-field>
</div>
</v-app>
<script src="libraries/vue/dist/vue.min.js"></script>
<script src="libraries/vuetify/dist/vuetify.min.js"></script>
<script>
var app = new Vue({
el: "#test",
data: {
test: "",
},
methods: {
}
})
</script>
</body>
How it works with the SAME library but just a different project
https://i.imgur.com/86TNKfO.png
You have an incorrect nesting of HTML tags for the application. Try this:
<div id="test">
<v-app>
<v-content>
<v-container>
<v-text-field label="Testing" v-model="test"></v-text-field>
</v-container>
</v-content>
</v-app>
</div>
[ https://jsfiddle.net/ga8kpzp0/ ]
I'm facing a problem, when i using Polymer's iron-ajax element.
I have a custom element like that:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="first-element">
<template>
<!-- Stylesheet-->
<style>
::host{
display:block;
}
</style>
<!-- Element content -->
<h1>
{{yolo}}
</h1>
<iron-ajax
auto
url="http://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json"
handle-as="json"
on-response="handleResponse"
last-response="ajaxResponse"></iron-ajax>
<span>{{ajaxResponse.city_name}}</span>
</template>
<script>
Polymer({
is: "first-element",
properties: {
yolo: {
type: String,
value: 'YOLOOO'
}
},
handleResponse: function(){
console.log('Jobs Done')
}
});
</script>
</dom-module>
The handleResponse function, also display's browsers developer console, so that request is working correctly. Databinding also working correctly, i can also see my "yolo" properties value.
But, it doesn't display data, i also use brackets e.g [[ajaxResponse.city_name]]
How can I solve that? Thanks for help!
You are not binding iron-ajax last-response attribute to any of your polymer element properties, it's supposed to be : last-response = "{{ajaxResponse}}".
In addition the amazon request need to be loaded over https.
Here is Plunkr to see it in action.
You can check this PolyCast on iron-ajax if you want to learn more.
<dom-module id="first-element">
<template>
<!-- Stylesheet-->
<style>
::host {
display: block;
}
.icon{
width:35px;
height:auto;
float:right;
position:relative;
top:-20px;
}
</style>
<!-- Element content -->
<h1>
{{yolo}}
</h1>
<iron-ajax auto url="https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json" handle-as="json" on-response="handleResponse" last-response="{{ajaxResponse}}"></iron-ajax>
<h1>{{ajaxResponse.city_name}}</h1>
<template is="dom-repeat" items="{{ajaxResponse.days}}" index-as="day_no">
<div>
<hr>
<span>Day : {{day_no}}</span>
<br>
<img src="{{item.icon}}" alt="" class="icon">
<span> High: {{item.high}} C</span>
<br>
<span> Low: {{item.low}} C</span>
</div>
</template>
</template>
<script>
Polymer({
is: "first-element",
properties: {
yolo: {
type: String,
value: 'YOLOOO'
},
ajaxResponse: {
type: Array
}
},
handleResponse: function(e) {
console.log(e.detail.xhr.response);
}
});
</script>
</dom-module>