I wrote a component that is shared throughout my application, in some places I need the dragging/sorting and some do not want it there. I pass a prop to my component called disableDraggable and based on that it should disable, unfortunately it does not do anything, how can I disable the draggable?
I should note I tried both the options object syntax and also a simple :disable , here is the relevant code:
<draggable v-model="copyOfQuestions" #end="$emit('updateQuestionsOrder', copyOfQuestions)" :options="{disable : disableDraggable}">
// or :disable="disableDraggable"
<v-card flat class="list_outer_block" v-for="q in questions" :key="q.question_id">
<v-card-text class="pa-0">
<v-layout justify-start align-center>
<v-flex initial-xs px-2 py-3 class="handle minwdth-0" :title="$t('general.drag_for_reorder')">
<v-icon class="text--secondary text--lighten-3">$vuetify.icons.drag_indicator</v-icon>
</v-flex>
....
props: ['questions', 'disableDraggable'],
How can I disable the draggable functionality?
I should note that vue-draggable (what I am using) supposedly has the same api as SortableJs
It should be :disabled and NOT :disable.
<draggable v-model="copyOfQuestions" #end="$emit('updateQuestionsOrder', copyOfQuestions)" :options="{disabled : disableDraggable}">
Reference:
https://github.com/SortableJS/Vue.Draggable/blob/17bdd4b8b2ab4f4df45dd76edf1afec864ec0936/example/debug-components/slot-example.vue
Related
I have a component with a v-card in it which looks like this:
<!-- CurrentFile.vue -->
<v-card color="primary">
<v-card-title class="secondary--text text-wrap">Flashing title</v-card-title>
<v-card-subtitle>
<span class="secondary--text text-h6">A fancy subtitle</span>
</v-card-subtitle>
<v-card-text class="mt-n3">
...
</v-card-text>
</v-card>
While refactoring, I wanted to create a new component that would encapsulate both v-card-title and v-card-subtitle helper components, since they use the same text color.
<!-- CurrentFile.vue -->
<v-card color="primary">
<my-new-header textColor="secondary--text" title="Flashing title" subtitle="A fancy subtitle"/>
<v-card-text class="mt-n3">
...
</v-card-text>
</v-card>
I went on to create this child component
<!-- MyNewHeader.vue -->
<template>
<span>
<v-card-title class="text-wrap" :class="textColor">{{ title }}</v-card-title>
<v-card-subtitle>
<span class="text-h6" :class="textColor">{{ subtitle }}</span>
</v-card-subtitle>
</span>
</template>
Issue
With the inclusion of a <span> tag, the use of v-card-title and v-card-subtitle components is almost irrelevant. It seems to me that both containers lose their properties (margins and paddings).
Of course, it's logical, since it adds an undesired level of hierarchy. Once the child component is injected, the structure ends up looking like this:
<v-card>
<span>
<v-card-title/>
<v-card-subtitle>
<span/>
</v-card-subtitle>
</span>
<v-card-text/>
</v-card>
I would very much remove that <span> tag to avoid all these problems, but there must only be one element at the template root.
Is there another way of doing what I want to do that I'm missing? Or maybe is it overkill to want that many sub-components?
There are 3 possible solutions for your issue:
Using fragments - https://github.com/privatenumber/vue-frag
Using render function instead of a component template - https://v2.vuejs.org/v2/guide/render-function.html
Using CSS display: contents to effectively replace the wrapper with its content - https://developer.mozilla.org/en-US/docs/Web/CSS/display-box
I'm trying to create a group of selectable items using Vuetify.
Nevertheless, it is not working because inside the template I'm using a Vue.component called fm-card.
When you use a Vue.component you have to use #click.native instead of #click.
<v-item-group active-class="primary">
<v-container>
<v-row justify="center">
<v-col
class="fm-card-container"
cols="2"
v-for="item in items"
v-bind:key="item.id"
>
<v-item v-slot="{ active, toggle }">
<fm-card
#click.native="toggle;"
class="fm-card d-flex align-center"
:title="item.name"
:image="productImage(item.image)"
:imageHeight="95"
dark
height="200"
:color="active ? 'primary' : ''"
>
{{`hola soy el ${toggle}`}}
<v-scroll-y-transition>
<div v-if="active" class="text-h2 flex-grow-1 text-center">
Active
</div>
</v-scroll-y-transition>
</fm-card>
</v-item>
</v-col>
</v-row>
</v-container>
</v-item-group>
I have tried to use #click and #click.native but it seems that nothing is happening
First of all why don't you put your <fm-card> as an "real" component and reference it in your parent and pass all of your values you are using in there with it?
Like this
<fm-card :value1="value1" :value2="value2"/>
than you can put your complete code in this component - it's making your code much more clearer.
And than I think you don't need to use #click.native any more... #click should be enough, but than check that you have a semicolon after your toggle; - you have to delete this!
Than you can go to your methods and work with your click event like this:
methods: {
toggle() {
//your code in here
}
}
Hopefully this helps you out! Pls let me know!
I'm having a variety of CSS issues with Vuetify that I'm hoping someone can help me resolve. I'm using a split panel view (vue-split-panel) with Vuetify, but Vuetify doesn't seem to consistently recognize when to trigger the full-column width, as shown below. I'm able to "trigger" the full column width (for the same split panel width) by just opening and then closing the Chrome js console.
I put this into a codesandbox so that it's reproducible. In doing so, I see a new issue that the radio buttons aren't showing.
https://codesandbox.io/s/split-view-test-7mlx1
If you're able to show me how to tweak the sandbox to make the responsivity work I'd so appreciate it!
Supposed to be a radio button:
Also, an issue that I can't reproduce in the codesandbox but I'm experiencing in my app (it's a JupyterLab extension) is shown in the bottom screenshot: the select label has the border line going through it. I tried to find if there is a CSS conflict somewhere but didn't know exactly where to look.
Furthermore I also have an issue that the select menu is offset proportional to the left menu, for some reason... why does opening the left and top menus effect the position? How can I fix it? I've tried using the "attach" property and adding an id to the element itself, or creating a parent div, but neither seems to solve it.
This is ~slightly reproducible in the sandbox by making the split panel wide and clicking the multi-select, then making it narrower and clicking again. You'll see that the menu is offset when it opens.
Solutions that don't involve iFrames would be preferred, and yes, I do have my app wrapped with <v-app>, however since it's a JupyterLab extension I only have access to the main tab space (not the left or top menus) so the v-app is wrapped around the HTML element which is the main tab area, not the full screen.
I think there might be a bug in the Vuetify code somewhere around this function: https://github.com/vuetifyjs/vuetify/blob/054555a42e2ef368df2d6e168d1eec7fc06fb12c/packages/vuetify/src/components/VSelect/VSelect.ts#L456
I have resolved all the CSS issues
Refactotred the grid layout by adding the proper components and breakdowns in UI. Added a fix to radio buttons. Added the css dependencies, material icons dependencies, fonts which vuetify uses internally
Check for the working codepen here: https://codesandbox.io/s/split-view-test-47f2h
<template>
<div id="app">
<v-app>
<Split style="height: 500px;">
<SplitArea :size="25">panel left</SplitArea>
<SplitArea :size="75">
<v-container fluid grid-list-md>
<v-layout row wrap>
<v-flex class="d-flex" xs="12" sm="12" md="6" lg="4">
<v-text-field
v-model="params.c.selected"
label="C"
hint="Penalty parameter C of the error term."
persistent-hint
return-object
type="number"
outlined
></v-text-field>
</v-flex>
<v-flex class="d-flex" sm="12" md="12" lg="6">
<v-select
v-model="params.kernel.selected"
hint="Specifies the kernel type to be used in the algorithm. It must be one of ‘linear’, ‘poly’, ‘rbf’, ‘sigmoid’, ‘precomputed’ or a callable. If none is given, ‘rbf’ will be used. If a callable is given it is used to pre-compute the kernel matrix from data matrices; that matrix should be an array of shape (n_samples, n_samples)."
:items="params.kernel.items"
label="Kernel"
persistent-hint
return-object
outlined
></v-select>
</v-flex>
<v-flex class="d-flex" sm="12" md="12" lg="6">
<v-text-field
v-model="params.degree.selected"
label="Degree"
hint="Degree of the polynomial kernel function ('poly'). Ignored by all other kernels."
persistent-hint
return-object
type="number"
outlined
></v-text-field>
</v-flex>
<v-flex class="d-flex" sm="12" md="12" lg="6">
<v-text-field
v-model="params.coef0.selected"
label="Coef0"
hint="Independent term in kernel function. It is only significant in 'poly' and 'sigmoid'."
persistent-hint
type="number"
outlined
></v-text-field>
</v-flex>
<v-flex class="d-flex" sm="12" md="12" lg="6">
<v-radio-group
v-model="params.probability.selected"
hint="Independent term in kernel function. It is only significant in 'poly' and 'sigmoid'."
persistent-hint
>
<template v-slot:label>
<div style="font-size: 12px">
Probability:
boolean, optional (default=False)
</div>
<br>
</template>
<v-radio label="True" :value="true" color="black"></v-radio>
<v-radio label="False" :value="false" color="black"></v-radio>
</v-radio-group>
</v-flex>
</v-layout>
</v-container>
</SplitArea>
</Split>
</v-app>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
params: {
c: { default: 1, selected: 1 },
kernel: {
default: "rbf",
selected: "rbf",
items: ["linear", "poly", "rbf", "sigmoid", "precomputed"]
},
degree: { default: 3, selected: 3 },
coef0: { defaul: 0.0, selected: 0.0 },
probability: { default: true, selected: true }
}
};
}
};
</script>
<style>
</style>
I want to use autocomplete from Vuetify and I am facing issues there because on my website I have one of the outer divs position: relative the dropdown part of the autocompelete, which is position: absolute, is attaching itself not to the bottom of the input but in random place.
Autocomplete has a prop attach which Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element. so I thought I use that and set it to class of my input.
And this works but it causes warning in the console
[Vuetify] Unable to locate target v-autocomplete
found in
---> <VMenu>
<VAutocomplete>
<VCard>
<VApp>
<Root>
Here the link where I reproduced the console warning.
If you are not using v-app component in App.vue, make sure to add data-app attribute to the div with the id app in App.vue.
The result will be like the following:
<template>
<div id="app" data-app>
.... All components, routers, views here ...
</div>
</template>
This worked for me:
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-title class="headline font-weight-regular blue-grey white--text">Profile</v-card-title>
<v-card-text>
<v-subheader class="pa-0">Where do you live?</v-subheader>
<v-autocomplete
v-model="model"
:hint="!isEditing ? 'Click the icon to edit' : 'Click the icon to save'"
:items="states"
:readonly="!isEditing"
:label="`State — ${isEditing ? 'Editable' : 'Readonly'}`"
persistent-hint
prepend-icon="mdi-city"
:attach="'#attach'"
>
<template v-slot:append-outer>
<div id="attach"></div>
<v-slide-x-reverse-transition
mode="out-in"
>
<v-icon
:key="`icon-${isEditing}`"
:color="isEditing ? 'success' : 'info'"
#click="isEditing = !isEditing"
v-text="isEditing ? 'mdi-check-outline' : 'mdi-circle-edit-outline'"
></v-icon>
</v-slide-x-reverse-transition>
</template>
</v-autocomplete>
</v-card-text>
</v-card>
</v-app>
</div>
How I can add custom attributes to Vuetify tags. I want add some Schema.org attributes to my site.
I have template like this:
<template>
<v-container>
<v-layout row wrap >
<v-flex xs12>
<h1 class="content-title display-1">{{ post.title }}</h1>
</v-flex>
<v-flex xs12>
<div class="content-body" v-html="getMarkdown(post.text)"></div>
</v-flex>
</v-layout>
</v-container>
</template>
Vuetify will usually “pass on” your custom attributes, unless they collide with something that's in their API. In other words, this will work (it's not clear from your question what you tried that didn't):
<v-btn itemprop="thing" />
However, a more generic and stable solution would probably be to add that markup to a wrapping element, or to create your own component that wraps the Vuetify component. Or use <meta> tags (yes, they are allowed in the body).