|
7 | 7 | <meta name="generator" content="VuePress 1.5.4"> |
8 | 8 |
|
9 | 9 | <meta name="description" content="Query Builder Vue documentation"> |
10 | | - <link rel="preload" href="/vue-query-builder/assets/css/0.styles.4dcfeb34.css" as="style"><link rel="preload" href="/vue-query-builder/assets/js/app.a5cc4205.js" as="script"><link rel="preload" href="/vue-query-builder/assets/js/2.fb651747.js" as="script"><link rel="preload" href="/vue-query-builder/assets/js/6.bd371da9.js" as="script"><link rel="prefetch" href="/vue-query-builder/assets/js/10.b1525e80.js"><link rel="prefetch" href="/vue-query-builder/assets/js/3.3b10a7bb.js"><link rel="prefetch" href="/vue-query-builder/assets/js/4.f37d3747.js"><link rel="prefetch" href="/vue-query-builder/assets/js/5.aef80115.js"><link rel="prefetch" href="/vue-query-builder/assets/js/7.037a7bf5.js"><link rel="prefetch" href="/vue-query-builder/assets/js/8.697c9ce3.js"><link rel="prefetch" href="/vue-query-builder/assets/js/9.7dedeaeb.js"> |
| 10 | + <link rel="preload" href="/vue-query-builder/assets/css/0.styles.4dcfeb34.css" as="style"><link rel="preload" href="/vue-query-builder/assets/js/app.4f51f932.js" as="script"><link rel="preload" href="/vue-query-builder/assets/js/2.fb651747.js" as="script"><link rel="preload" href="/vue-query-builder/assets/js/6.281cf22a.js" as="script"><link rel="prefetch" href="/vue-query-builder/assets/js/10.b1525e80.js"><link rel="prefetch" href="/vue-query-builder/assets/js/3.3b10a7bb.js"><link rel="prefetch" href="/vue-query-builder/assets/js/4.f37d3747.js"><link rel="prefetch" href="/vue-query-builder/assets/js/5.aef80115.js"><link rel="prefetch" href="/vue-query-builder/assets/js/7.037a7bf5.js"><link rel="prefetch" href="/vue-query-builder/assets/js/8.697c9ce3.js"><link rel="prefetch" href="/vue-query-builder/assets/js/9.7dedeaeb.js"> |
11 | 11 | <link rel="stylesheet" href="/vue-query-builder/assets/css/0.styles.4dcfeb34.css"> |
12 | 12 | </head> |
13 | 13 | <body> |
|
43 | 43 | <span class="token punctuation">]</span><span class="token punctuation">,</span> |
44 | 44 | <span class="token punctuation">}</span> |
45 | 45 | </code></pre></div><h2 id="rules"><a href="#rules" class="header-anchor">#</a> Rules</h2> <p>Rules are individual conditions within a group and must be defined as components, adhering to the |
46 | | -<a href="https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components" target="_blank" rel="noopener noreferrer">v-modle API<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p> <p>Every must have a unique identifier, a display name, the underlying component and optionally an |
47 | | -individual value.</p> <p>You may want to wrap an external library with a dedicated component for one of the following |
| 46 | +<a href="https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components" target="_blank" rel="noopener noreferrer">v-modle API<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p> <p>Every rule must have an unique identifier, a display name, the underlying component and optionally |
| 47 | +an initialization value.</p> <p>You may want to wrap an external library with a dedicated component for one of the following |
48 | 48 | reasons:</p> <ul><li>The library doesn't support the v-model API.</li> <li>The underlying component requires addition configuration or you may want to provide additional |
49 | 49 | configuration with props.</li> <li>You want to apply custom CSS.</li></ul> <p>The <code>initialValue</code> may provide any primitive value (string, number or null), however any object or |
50 | 50 | array must be constructed by a factory function.</p> <p>There are several options for assigning a component to a rule:</p> <ul><li>JavaScript modules</li> <li>Pre-defined Vue Components</li> <li>Inline the component's definition directly (requires compiler-included build for templates or use |
51 | | -render functions directly)</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> InputSelection <span class="token keyword">from</span> <span class="token string">'./InputSelection.vue'</span><span class="token punctuation">;</span> |
| 51 | +render functions directly)</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Below, there's a very simple version of employing custom rules. A more advanced version with |
| 52 | +custom operators in rules is demonstrated |
| 53 | +<a href="https://codesandbox.io/s/slot-rule-advanced-01o6l?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark" target="_blank" rel="noopener noreferrer">on CodeSandbox<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p></div> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> InputSelection <span class="token keyword">from</span> <span class="token string">'./InputSelection.vue'</span><span class="token punctuation">;</span> |
52 | 54 |
|
53 | 55 | Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'NumberSelection'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
54 | 56 | template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> |
|
145 | 147 | </a> |
146 | 148 | → |
147 | 149 | </span></p></div> </main></div><div class="global-ui"></div></div> |
148 | | - <script src="/vue-query-builder/assets/js/app.a5cc4205.js" defer></script><script src="/vue-query-builder/assets/js/2.fb651747.js" defer></script><script src="/vue-query-builder/assets/js/6.bd371da9.js" defer></script> |
| 150 | + <script src="/vue-query-builder/assets/js/app.4f51f932.js" defer></script><script src="/vue-query-builder/assets/js/2.fb651747.js" defer></script><script src="/vue-query-builder/assets/js/6.281cf22a.js" defer></script> |
149 | 151 | </body> |
150 | 152 | </html> |
0 commit comments